Label for Radio Button Using HTML CSS will makes look and feel of a radio button much better. This task is done with id and for.
ID of the radio and its coresponding lable’s for value should be same. Here is the tutorial and demo link
Label for Radio Button Using HTML CSS
[code type=html]
<html>
<body>
<input type=”radio” id=”1″ class=”rad” name=”name” />
<label for=”1″>One</label>
<input type=”radio” id=”2″ class=”rad” name=”name” />
<label for=”2″>Two</label>
<input type=”radio” id=”3″ class=”rad” name=”name” />
<label for=”3″>Three</label>
</body>
</html>
[/code]
input[type=radio]:checked + label – label of the corresponding checked radio button will have #c33
[code type=css]
label
{
background-color:#9C3;
padding: 5px 12px;
}
input[type=radio]
{
display:none;
}
input[type=radio]:checked + label
{
background-color:#C33;
}
[/code]
[code type=html]
<html>
<head>
<style type=”text/css”>
label
{
background-color:#9C3;
padding: 5px 12px;
}
input[type=radio]
{
display:none;
}
input[type=radio]:checked + label
{
background-color:#C33;
}
</style>
</head>
<body>
<input type=”radio” id=”1″ name=”name” />
<label for=”1″>One</label>
<input type=”radio” id=”2″ name=”name” />
<label for=”2″>Two</label>
<input type=”radio” id=”3″ name=”name” />
<label for=”3″>Three</label>
</body>
</html>
[/code]
nice post.
Its really nice
But i need to know the meaning of
input[type=radio]:checked + label
{
background-color:#C33;
}
working of checked+label ????? plz
input[type=radio]:checked + label – label of the corresponding checked radio button will have #c33
good~
Dear Prasad buddy
So many thank u so many bundle of thanks dear
Very nice, trick!!
it is working on FF and web kit only.