使用css3中的checked修改checkbox和radio样式

style部分：

input[type="checkbox"],input[type="radio"]{
    display: none;
}
.checkbox,.radio{
    display: inline-block;
    20px;
    height: 20px;
    border-radius: 50%;
    border:1px solid #ddd;
    position:relative;
}
input[type="checkbox"]:checked + .checkbox:before,input[type="radio"]:checked + .radio:before{
    content:'';
    displayt:inline-block;
    10px;
    height: 10px;
    left:6px;
    top:6px;
    position:absolute;
    background-color: #0ff;
    border-radius:50%;
}

html部分：

<div>
    <h1>修改checkbox样式</h1>
    <label>
        <input type="checkbox">
        <span class="checkbox"></span>
        <span>篮球</span>
    </label>
    <label>
        <input type="checkbox">
        <span class="checkbox"></span>
        <span>足球</span>
    </label>
</div>

<div>
    <h1>修改radio样式</h1>
    <label>
        <input type="radio" name="sex">
        <span class="radio"></span>
        <span>男</span>
    </label>
    <label>
        <input type="radio" name="sex">
        <span class="radio"></span>
        <span>女</span>
    </label>
</div>