自定义input checkbox或者radio的样式

浏览器自带的单选钮和多选框的样式都比较单一，很多时候我们需要更换它们的样式。

HTML

<div>
    <input type="radio" name="radioname" id="radio_1st" value="1">
    <label for="radio_1st">这是一个单选钮</label>
</div>

关键：
1，label的for属性绑定到input框的id属性，这样保证label再被点击时也点击了input单选钮（label拥有了input的点击性质）
2，此时的input框可以被隐藏起来，将所有样式写到label上，做一个假的单选钮样式

CSS

/*隐藏input*/
input[type="radio"] {
    display: none;
}
/*label虚拟选择器添加单选钮未点击状态样式*/
input[type="radio"]+label:before {
    background: url(../images/radio-check-out.png);
}
/*label虚拟选择器添加单选钮点击状态样式*/
input[type="radio"]:checked+label:before {
    background: url(../images/radio-check-in.png);
}
/*样式上完成单选框状态的展示*/

效果