Form Radio & checkbox Solution

The alignment of ORM Radio & checkbox has always been a problem. Not only are different browsers different, different fonts, and different text sizes different. I believe that a large number of people are entangled, if you don't have a good understanding of the experience, I believe that every time you encounter this ghost thing, it's a headache.

Reset form Radio & checkbox

Because different browsers have different resolutions, some are default margin, some are default padding, and IE6, 7 are connected to margin and padding. Even if it is set to 0, the occupied space is large, so there is still a need to reset it to solve a lot of problems.

CSS code

/* Reset form elements */input, select, label {vertical-align: middle;}/* reset form Radio & checkbox */. form-radio ,. form-checkbox {margin: 0 5px 0 0;/* spacing between the text on the right */padding: 0; width: 13px; Height: 13px; Vertical-align: middle; Font: 13px Helvetica, Arial, sans-serif ;}

Demo 1 12 pxdemo 2 13 pxdemo 3 14 pxdemo 4 16px

HTML code

<Form ID = "demo1" class = "Demo" name = "form1" method = "Post" Action = "#"> <Div class = "form-item"> <label> report type: </label> <Div class = "form-special-wrap"> <label> <input type = "radio" Checked = "checked" value = "1" class = "Form -Radio "name =" reporttype "> spam ads </label> <input type =" radio "value =" 2 "class =" form-radio "name =" reporttype "> porn </label> <input type =" radio "value =" 3 "class =" form-radio "name =" reporttype "> fake ads </ label> <label> <input type = "radio" value = "4" class = "form-radio" name = "reporttype"> others </label> </div> </div> </form>

 

CSS code

.form-item label{    font-weight:bold;}.form-special-wrap{    display:inline-block;*display:inline;*zoom:1;}.form-special-wrap label{    font-weight:normal;}#demo2{    font-size:13px;}#demo3{    font-size:14px;}#demo4{    font-size:16px;}

 

Total: we can see the obvious effect of the comparison from the above four instances. In addition to Resetting, we only set the font size. Different browsers have different performances. IE7 has the best performance and looks centered. Firefox's default form-radio line-height is 15px (that is, the font size plus 3 pixels). In CSS, line-height cannot overwrite the default line height, google, IE8, and 9 browsers seem to be set line-height, but they do not work at all. This is only because IE7 is doing well. Line-height cannot solve this alignment problem, so we have to try it with vertical-align.

Experimental Solution

This ghost is really complicated, so I cannot be sure that this is OK. I can only propose an experimental solution. The first step is reset, of course, the second step is to set form-Radio vertical-align Based on the font size you set, and then correct IE6 alignment and add a bug. (This revision is post-added for simplicity)

Demo 1 12px correction version DEMO 2 13px correction version demo 3 14px correction version demo 4 16px correction version

CSS code

#demo1fix .form-radio{    vertical-align:-2px;    *vertical-align:middle;/*ie7 ie6*/    _vertical-align:3px;/*ie6*/}#demo2fix .form-radio{    vertical-align:-2px;    *vertical-align:middle;/*ie7 ie6*/    _vertical-align:3px;/*ie6*/}#demo3fix .form-radio{    vertical-align:-1px;    *vertical-align:middle;/*ie7 ie6*/    _vertical-align:2px;/*ie6*/}#demo4fix .form-radio{    vertical-align:0;    *vertical-align:middle;/*ie7 ie6*/    _vertical-align:3px;/*ie6*/}

 

Form checkbox

Checkbox and radio should be brothers. Now that radio is handled, let's take the opportunity to fix the checkbox. Let's change the above radio type to checkbox, then change the class to form-checkbox. This time, we will provide an alignment final demo.

Demo 5 16px

CSS code

# Demo5 {font-size: 16px;} # demo5. form-checkbox {vertical-align: 0;/* set different values based on different font-size */* vertical-align: middle; /* IE7 IE6 */_ vertical-align: 3px;/* IE6 sets different values based on different font-size */}

I believe that after reading the above cases, we all said that we are very entangled. Using Vertical to adjust it is simply a torment, but this is also a way to solve the problem haha. Next we will introduce another method, that is, the float method. Of course, for better control, we may have more labels. The idea is to wrap the text in span, set both the checkbox and span to float, and then set the margin-top of the checkbox. This is very convenient, just like radio. Of course, you still need to reset it.

HTML code

<Form ID = "demo6" class = "demo form-horizontal" name = "demo6" method = "Post" Action = "#"> <Div class = "form-item form -Radio-checkbox-wrap "> <label> interests: </label> <Div class = "form-field"> <label> <input type = "checkbox" Checked = "checked" value = "1" class = "form-checkbox "Name =" "> <span> music </span> </label> <input type =" checkbox "value =" 2 "class =" form-checkbox" name = ""> <span> novel </span> </label> <input type = "checkbox" value = "3" class = "form-checkbox" Name = ""> <span> surfing the Internet </span> </label> </div> </form>

 

CSS code

#demo6{    overflow:auto;*zoom:1;}.form-horizontal label{    float: left;    text-align: right;    font-weight:bold;    width:100px;    font-size:16px;    line-height:24px;}.form-horizontal .form-field{    float:left;}.form-radio-checkbox-wrap .form-field label{    text-align: left;    width: auto;    font-weight:normal;    margin:0 10px 0 0;    float:left;    display:inline;}.form-radio-checkbox-wrap .form-checkbox,.form-radio-checkbox-wrap span{    float:left;    display:inline;}.form-radio-checkbox-wrap .form-checkbox{    margin-right:5px;    margin-top:5px;}

 

Form Radio & checkbox Solution