自定义input checkbox或者radio的样式

charlotteeeeeee

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

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);
}
/*样式上完成单选框状态的展示*/

效果

clipboard.png

阅读 1.2k
42 声望
3 粉丝
0 条评论
42 声望
3 粉丝
文章目录
宣传栏