demo 演示地址:http://runjs.cn/code/uae7ua0

之前想实现一个自定义的单选框,需要用到js来控制class,自从有了css3中的一些伪类,可以轻松的实现自定的单选框效果(复选框同)

html:

<label for="haha">
<input id="haha" type="radio" name="isSale" checked/>
<span></span>
</label>是
<label for="hehe">
<input id="hehe" type="radio" name="isSale"/>
<span></span>
</label>否

css:

input[type="radio"]{
    display:none;
}
label{
    height:20px;
    width:20px;
    //line-height:20px;
    display:inline-block;
    border:1px solid #eee;
    border-radius:50%;
    cursor:pointer;
}
label span{
    height:14px;
    width:14px;
    margin:3px auto;
    background:#ddd;
    display:block;
    border-radius:50%;
}
input[type="radio"]:checked + span{
    background:#555;
}

当然了,目前这种方案之对支持css3的浏览器有效,对于不支持css3的,还是得用js来实现