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的字体库

就这样子就可以啦！