纯css3自定义美化input radio(单选框)和checkbox(多选框)的样式
程序员文章站
2022-03-01 13:23:14
...
估计做过Web的都发现了一个问题、radio和checkbox由于不同的浏览器显示的样式不一致、因此我们需要自定义radio(单选框)和checkbox(多选框)的样式、基本原理就是给radio和checkbox的自定义样式设置成图片背景、然后通过js或者jQuery给包裹radio和checkbox的label根据点击效果添加和删除类别、从而达到自定义radio和checkbox的假象、最终生成的效果图、如下所示
HTML代码如下
<form accept-charset="utf-8" method="get" action="#"> <fieldset class="checkboxes"> <label for="checkbox-01" class="label_check"> <input type="checkbox" checked="" value="1" id="checkbox-01" name="sample-checkbox-01" />Checkbox1 </label> <label for="checkbox-02" class="label_check"> <input type="checkbox" value="1" id="checkbox-02" name="sample-checkbox-02" /> Checkbox2 </label> </fieldset> <fieldset class="radios"> <label for="radio-01" class="label_radio"> <input type="radio" checked="" value="1" id="radio-01" name="sample-radio" />Radio1 </label> <label for="radio-02" class="label_radio"> <input type="radio" value="1" id="radio-02" name="sample-radio" />Radio2 </label> <label for="radio-03" class="label_radio"> <input type="radio" value="1" id="radio-03" name="sample-radio" /> Radio3 </label> </fieldset> </form>
JavaScript代码
<script type="text/javascript"> $(function(){ $(´body´).addClass(´has-js´); $(´.label_check,.label_radio´).click(function(){ setupLabel(); }); setupLabel(); }); function setupLabel(){ if($(´.label_check input´).length) { $(´.label_check´).each(function(){ $(this).removeClass(´c_on´); }); $(´.label_check input:checked´).each(function(){ $(this).parent(´label´).addClass(´c_on´); }); }; if($(´.label_radio input´).length) { $(´.label_radio´).each(function(){ $(this).removeClass(´r_on´); }); $(´.label_radio input:checked´).each(function(){ $(this).parent(´label´).addClass(´r_on´); }); }; } </script>
CSS代码
* { margin: 0; padding: 0; } body { font: 14px/18px ´HelveticaNeue-Light´, ´Helvetica Neue´ , Arial, Helvetica, sans-serif; color: #fff; background: #333; } a:hover, a:active { outline: none; } /*form style*/ form { width: 300px; padding: 18px 20px 0; margin:20px auto; background-color: #0064cd; background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); background-image: -moz-linear-gradient(#049cdb, #0064cd); background-image: -ms-linear-gradient(#049cdb, #0064cd); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); background-image: -webkit-linear-gradient(#049cdb, #0064cd); background-image: -o-linear-gradient(#049cdb, #0064cd); background-image: linear-gradient(#049cdb, #0064cd); -webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 5px 12px rgba(0,0,0,.4); -moz-box-shadow: 0 5px 12px rgba(0,0,0,.4); -khtml-box-shadow: 0 5px 12px rgba(0,0,0,.4); box-shadow: 0 5px 12px rgba(0,0,0,.4); } fieldset { border: 0; padding-bottom: 9px; } label { display: block; cursor: pointer; line-height: 20px; padding-bottom: 9px; text-shadow: 0 -1px 0 rgba(0,0,0,.2); } .checkboxes { border-bottom: 1px solid #0064cd; } .radios { padding-top: 18px; border-top: 1px solid #049CDB; } .label_check input, .label_radio input { margin-right: 5px; } .has-js .label_check, .has-js .label_radio { padding-left: 34px; } .has-js .label_radio, .has-js .label_check{ background: url(http://www.w3cplus.com/sites/default/ files/checkbox-radio-bg.png) no-repeat; } .has-js .label_radio { background-position: 0 0; } .has-js .label_check { background-position: 0 -100px } .has-js label.c_on { background-position: 0 -150px; } .has-js label.r_on { background-position: 0 -50px; } .has-js .label_check input, .has-js .label_radio input { position: absolute; left: -9999px; }
上面的代码是控制css样式的js代码、采用的是jQuery、所以一定要先引入jQuery文件、以上就是使用纯CSS自定义radio(单选框)和checkbox(多选框)的样式的全部代码、代码可以直接拷贝运行、赶紧去试一下吧