Radio Button Label styling
I have some Radio Buttons as shown here:
<input type="radio" name="sex" id="Duration" value="Duration"/>
<label"Duration"&g开发者_开发百科t;Date Range</label>
I have tried several ways, but i am unable to change the styling for the label of these radio Buttons
Could anybody please help me?
First you need to correct the label code, you have <label"Duration">
and it should have "for", like this:
<label for="Duration">
(read here: http://www.w3schools.com/tags/tag_label.asp)
Then you need to target the <label>
with your CSS.
Try this in your CSS definitions:
label {
text-size: 11px;
font-weight: bold;
}
To contribute a little to jackJoe a little something on the side:
"i would recommend using class over 'id' because class is used for muliply uses for the same purpose, like a bunch of radiobuttons that need the same style, id however is for most of the time one time only styles.";
<label class="duration">
in css you need the '.' to call it a class and a '#' to call it an id (sorry for my bad english)
css:
.duration{
width:21px;
height:21px;
margin: 0px;
padding: 0px;
background-image:url(images/radiobutton.png);
background-repeat: no-repeat;
}
on the side watch out for using Capslock letters in the beginning its better to use only small letters.
This is a sample styling
.radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(checkbox.gif) no-repeat;
display: block;
clear: left;
float: left;
}
精彩评论