开发者

Radio Button Label styling

开发者 https://www.devze.com 2023-03-06 13:05 出处:网络
I have some Radio Buttons as shown here: <input type=\"radio\" name=\"sex\" id=\"Duration\" value=\"Duration\"/>

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;
}
0

精彩评论

暂无评论...
验证码 换一张
取 消