Checked radio button’s and bold label css

Author: | Posted in Test No comments

radio

[button color="green" size="small" link="http://www.tobest.net/demo/radiocheckbox.html" target="blank" ]Demo[/button] [button color="green" size="small" link="http://www.tobest.net/download/radiocheckbox.zip" target="blank" ]Download[/button]

If you would like to have the < input > be a child of < label > instead of having them separate, here is a pure CSS way that you could accomplish it:

CSS

[css] :checked + span {
font-weight: bold;
} /* Optional other stuff just to make it look better */
label {
display: inline-block; width: 200px; padding: 5px;
}
label:hover {
background:#eee; cursor:pointer; border: 1px solid #aaa; padding: 4px;
}[/css]

HTML

[php]<label>
<input type="radio" name="test" />
<span>Radio number one</span>
</label>
<label>
<input type="radio" checked="checked" name="test" />
<span>Radio number two</span>
</label>[/php]

Add Your Comment