更改radio，checkbox默认样式

更改默认样式，主要是借助了伪元素来处理样式,

radio更改后样式：

代码如下 

<style type="text/css">
        .test-label{display:inline-block}
        .test-radio{display:none}
        .test-radioInput{
            border:2px solid #ddd;
            background-color:#fff;
            border-radius:100%;
            display:inline-block;
            height:16px;
            margin-right:10px;
            margin-top: -1px;
            vertical-align:middle;
            width:16px;
            line-height:1}
        .test-radio:checked+ .test-radioInput:after{
            background-color:#57ad68;
            border-radius:100%;
            content:"";display:inline-block;
            height:12px;
            /*margin:2px;*/
            width:12px}
    </style>
        <label class="test-label">

        <input class="test-radio" type="radio" name="radio">

        <span class="test-radioInput"></span>苹果

        </lable>

        <label class="test-label">

        <input class="test-radio" type="radio" name="radio">

        <span class="test-radioInput"></span>李子

        </lable>

 

checkbox修改后效果：

代码如下：

 <style type="text/css">
        .test-label{
            display: inline-block;
            margin-right:10px;
        }
        .test-checkbox{
            display:none;
        }
        .test-checkboxInput{
            width:20px;
            height:20px;
            border-radius:5px;
            border:1px solid #ddd;
            display: inline-block;
            vertical-align: middle;
            margin-top:-4px;
            margin-right:10px;
        }
        .test-checkboxInput img{
            width:20px; height: 20px;display:none;
        }
        
        .test-checkbox:checked + .test-checkboxInput img{
            display:block;
        }
        
    </style>

        <label class="test-label"><input class="test-checkbox" type="checkbox" name="radio"><span class="test-checkboxInput"><img src="d.png" ></span>苹果</label>
        <label class="test-label"><input class="test-checkbox" type="checkbox" name="radio"><span class="test-checkboxInput"><img src="d.png" ></span>苹果</label>
        <label class="test-label"><input class="test-checkbox" type="checkbox" name="radio"><span class="test-checkboxInput"><img src="d.png" ></span>苹果</label>
        <label class="test-label"><input class="test-checkbox" type="checkbox" name="radio"><span class="test-checkboxInput"><img src="d.png" ></span>苹果</label>
        <label class="test-label"><input class="test-checkbox" type="checkbox" name="radio"><span class="test-checkboxInput"><img src="d.png" ></span>苹果</label>