html更改checkbox样式,html自定义checkbox样式

1.原理

就是将浏览器原生checkbox隐藏，对label进行相关操作。因为label和checkbox时绑在一起的，所以点击label就会选中

2.实现效果

图片.png

3.代码

提供一种

图片.png

1.html代码

原生的checkbox和对应的label，注意lable的for要与checkbox的id对应

markcheckbox1

2.css代码

1)将原生的checkbox隐藏

input[type="checkbox"] {

/*

display: none;这样会让tab键无法选取自定义的checkbox，所以使用下面的方法

clip 属性剪裁绝对定位元素。

*/

position: absolute;

clip: rect(0, 0, 0, 0)

}

2)设置checkbox样式

.mark是label的class，所以::before就是设置label前面的样式

.mark::before {

content: '\a0';

display: inline-block;

border: 1px solid silver;

text-align: center;

width: 20px;

height: 20px;

font-weight: bold;

}

3)设置check选中后的样式

input[type="checkbox"]:checked+.mark::before {

content: '\2713';

color: #FA8E53;

}