html自带的input框比较丑一点,如下图,
- 丑丑的checkbox
重新设计checkbox框的样式!
[1] 思路:将原来的input隐藏掉,添加一个新的标签,如<lable></lable>
标签 。设置lable
标签的样式,在为其点击后加个对勾
[2]
<input type="checkbox" class="checkbox" >
<label></label>
[3]
/*设置点击前的样式*/
input[type="checkbox"] + label::before {
content: "\a0"; /*不换行空格*/
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50% 50%;
background: #ffffff;
border: 1px solid #D8D8D8;
text-indent: 6px;
}
input[type="checkbox"]:checked + label::before {
content: "\2713";
background-color: #FF8200;
color: #ffffff;
}
input {
position: absolute;
visibility: hidden;
}
[4] 效果图:
点击前:
点击后: