input checkbox加样式

input checkbox加样式

给input的checkbox加样式

1.首先把标签写好

 <ul class="box-checkbox"><li class="check-box"> <input type="checkbox" ><label>iphone</label></li><li class="check-box"> <input type="checkbox" ><label>iphone</label></li><li class="check-box"> <input type="checkbox" ><label>iphone</label></li>
</ul>

2.写上样式

<style type="text/css">.box-checkbox li.check-box {position:relative;padding-left:20px;margin-bottom:16px;}.box-checkbox li.check-box input[type=checkbox] {position:absolute;left:12px;opacity:0;width: 40px;height: 34px;z-index: 999;margin-left: -10px;}.box-checkbox li label {position:relative;}.box-checkbox li label span {color:#bababa;}.box-checkbox li.check-box label:before {content:"";display:inline-block;position:absolute;width:16px;height:16px;left:0;top:5px;margin-left:-20px;border:2px solid #e7e7e7;border-radius:4px;background-color:#fff;-webkit-transition:border 0.15s ease-in-out, color 0.15s ease-in-out;-o-transition:border 0.15s ease-in-out, color 0.15s ease-in-out;transition:border 0.15s ease-in-out, color 0.15s ease-in-out;}.box-checkbox li.check-box label:after {content:'';display:inline-block;position:absolute;width:16px;height:16px;left:1px;top:2px;margin-left:-20px;padding-left:3px;padding-top:1px;font-size:11px;color:#555555;}.check-box label {display:inline-block;position:relative;padding-left:10px;}input[type="checkbox"]:checked + label:before {background-color:#f28b00;}.check-box input[type="checkbox"]:checked + label:before {background-color:#f0ad4e;border-color:#f0ad4e;}.check-box input[type="checkbox"]:checked + label:after {color:#fff;font-family:'iconfont';content:"e633";}</style>

里面的字体用的是iconfont的字体库

就这样子就可以啦！