有时候要根据需要修改checkbox的样式,通过写一个label标签,里面包一个span和一个表单控件
样式的实现是结合了伪类来实现。
以下是我自己迷惑的地方,自己为自己解答:
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
:after选择器在官方定义中是指在被选元素的内容后面插入的内容,因为这里不需要文字内容所以content:" ",
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ipt {
display: none;
}
.span {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid red;
border-radius: 10px;
}
/* 选中的border的颜色建议和未选中的border的颜色一样 */
.ipt:checked+.span:after {
content: "";
position: absolute;
width: 12px;
height: 12.5px;
background-color: #165;
border: 4px solid red;
border-radius: 10px;
}
</style>
</head>
<body>
<label class="checkBox">
全选:<input class="ipt" type="checkbox">
<span class="span"></span>
</label>
</body>
</html>
本人是想通过此平台整理记录自己的笔记,如有问题,请指正;如有侵权,请与我本人联系转私密,非常感谢。