首页 > 代码库 > form radio & checkbox解决方案
form radio & checkbox解决方案
orm radio & checkbox 的对齐一直是个问题，不仅不同浏览器不同，不同的字体,不同的文字大小也会表现不一样，相信纠结了一大批人，如果没有好好整理总结下得出一个经验，相信每次碰到这个鬼东西都是比较纠结的，很头疼啊
重置form radio & checkbox
因为不同浏览器解析不一样，有些默认margin，有些是默认padding，还有ie6,7连margin和padding即使设置为0后，所占的空间还是比较大，所以还是有必须重置下，一下就能解决很多麻烦
Css Code
/*reset form elements*/input, select, label { vertical-align:middle;}/*reset form radio & checkbox*/.form-radio,.form-checkbox{ margin:0 5px 0 0;/*与右侧文字的间距*/ padding:0; width:13px; height:13px; vertical-align:middle; font:13px Helvetica, Arial, sans-serif;}
demo 1 12px
demo 2 13px
demo 3 14px
demo 4 16px
Html Code
<form id="demo1" class="demo" name="form1" method="post" action="#"> <div class="form-item"> <label>举报类型：</label> <div class="form-special-wrap"> <label><input type="radio" checked="checked" value="1" class="form-radio" name="reportType">垃圾广告</label><label><input type="radio" value="2" class="form-radio" name="reportType">色情</label><label><input type="radio" value="3" class="form-radio" name="reportType">虚假广告</label><label><input type="radio" value="4" class="form-radio" name="reportType">其他</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;}
总：从上面四个实例我们可以看出对比的明显效果，在这里我们除了重置之外，只是设置了字体大小。各个浏览器都表现不一样，其中ie7表现最佳了，看起来是居中的哦呵呵。火狐默认的form-radio的line-height为15px(即字体大小加上3像素)，在css中使用line-height不能覆盖这个默认的行高，而谷歌和ie8,9浏览器看起来是设置的line-height，可是根本不管用啊，这个还只有ie7表现良好呵呵,line-height不能解决这个对齐问题，那只好用vertical-align来试试了
实验性解决
这个鬼东西确实挺复杂的，所以我也不能确定这样就ok了，只能提出一个实验性的解决方案，第一步当然就是reset喽，第二步根据自己设置的字体大小来设置form-radio的vertical-align，最后对ie6进行对齐修正，打上bug。（这个修订版本是后加了，为了简单）
demo 1 12px 修正版
demo 2 13px 修正版
demo 3 14px 修正版
demo 4 16px 修正版
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和radio应该是亲兄弟了，既然搞定了radio，那么就借机搞定下checkbox吧,我们把上面的radio的类型改成checkbox，然后把class改为form-checkbox就可以了，这次我们给出一个对齐的最终demo
demo 5 16px
Css Code
#demo5{ font-size:16px;}#demo5 .form-checkbox{ vertical-align:0;/*根据不同的font-size设置不同的具体值*/ *vertical-align:middle;/*ie7 ie6*/ _vertical-align:3px;/*ie6 根据不同的font-size设置不同的具体值*/}
相信看了上面的案例，大家都表示非常纠结吧，使用vertical来调那简直是折磨啊，不过这也是一种办法，能解决问题哈哈。下面我们介绍另一种方法，那就是float方法，当然如果为了好控制我们得标签可能得相对多那么一点。这个的思路就是把文字用span包裹起来，然后设置checkbox和span都float，然后再设置checkbox的margin-top就可以了，很是方便的，同理radio了。当然重置还是得要的啊
Html Code
<form id="demo6" class="demo form-horizontal" name="demo6" method="post" action="#"> <div class="form-item form-radio-checkbox-wrap"> <label>兴趣爱好：</label> <div class="form-field"> <label><input type="checkbox" checked="checked" value="1" class="form-checkbox" name=""><span>音乐</span></label> <label><input type="checkbox" value="2" class="form-checkbox" name=""><span>小说</span></label> <label><input type="checkbox" value="3" class="form-checkbox" name=""><span>上网</span></label> </div> </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解决方案