自定义checkbox，radio，select

自定义checkbox，radio

方法：使用label标签属性for属性与相关属性id进行关联

HTML代码：
<div class="testOptions">
    <ul>
        <li><input type="radio" id="radio01" name="check"><label for="radio01"></label>选项</li>
        <li><input type="radio" id="radio02" name="check"><label for="radio02"></label>选项</li>
        <li><input type="radio" id="radio03" name="check"><label for="radio03"></label>选项</li>
        <li><input type="radio" id="radio04" name="check"><label for="radio04"></label>选项</li>
    </ul>

    <ul>
        <li><input type="checkbox" id="checkbox01" name="check"><label for="checkbox01"></label>选项</li>
        <li><input type="checkbox" id="checkbox02" name="check"><label for="checkbox02"></label>选项</li>
        <li><input type="checkbox" id="checkbox03" name="check"><label for="checkbox03"></label>选项</li>
        <li><input type="checkbox" id="checkbox04" name="check"><label for="checkbox04"></label>选项</li>
    </ul>
</div>

<div class="_testOptions">
    <ul>
        <li><input type="checkbox" id="checkbox001" name="check"><label for="checkbox001"></label>选项</li>
        <li><input type="checkbox" id="checkbox002" name="check"><label for="checkbox002"></label>选项</li>
        <li><input type="checkbox" id="checkbox003" name="check"><label for="checkbox003"></label>选项</li>
        <li><input type="checkbox" id="checkbox004" name="check"><label for="checkbox004"></label>选项</li>
    </ul>
</div>
css代码：
<style>
        .testOptions li,._testOptions li{margin: 5px 0px;}
        /*隐藏选项框*/
        .testOptions input[type='checkbox'],.testOptions input[type='radio'],
        ._testOptions input[type='checkbox']{
            visibility: hidden;
            cursor: pointer;
        }

        /*设置label样式*/
        .testOptions input[type='radio']+label,.testOptions input[type='checkbox']+label,
        ._testOptions input[type='checkbox']+label{
            display: inline-block;
            vertical-align: top;
            width: 1.3em;
            height: 1.3em;
            margin-right:5px;
            position: relative;
            background-color: #d8d4d4;
            transition: background 0.5s linear;
            box-sizing:border-box;
            -webkit-transition: background 0.3s linear;
            -webkit-box-sizing:border-box;
        }
        /*相邻选择器来模拟选项被选择的效果*/
        .testOptions input[type='radio']+label{border-radius: 50%;}
        .testOptions input[type='radio']:checked+label {border:0.35em #d8d4d4 solid;background-color: #0ab5f1;}
        .testOptions input[type='checkbox']:checked+label {background-image: url("image/check_32px.png");background-size: 100% 100%;}

        ._testOptions input[type='checkbox']:checked+label:after{content: "√";font-size: 20px;font-weight:bold;color: #0ab5f1;}
    </style>

自定义select标签

一般自定义select需要借助第三方的插件，推荐一款比较不错的select插件selectordie
地址：http://www.dowebok.com/106.html