使用<label>标签修改input[type="checkbox"]的样式

因为的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上.

Male 所以正适合用于修改input的样式.

进入正文, 修改input[type=“checkbox”]的样式

默认样式: 选定前选定后;

复制代码
/选定前/
#male + label::before{ /设置label标签的伪元素/
content: “\a0”; /不换行空格/
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #999;
}
/选定时/
#male:checked + label::before{
content: “\2714”; /√/
text-align: center;
background-color: rgb(68, 171, 247);
}
/取消默认框/
#male{
display: none;
}
复制代码
因为的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上.

Male 所以正适合用于修改input的样式.

进入正文, 修改input[type=“checkbox”]的样式

默认样式: 选定前选定后;

复制代码
/选定前/
#male + label::before{ /设置label标签的伪元素/
content: “\a0”; /不换行空格/
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #999;
}
/选定时/
#male:checked + label::before{
content: “\2714”; /√/
text-align: center;
background-color: rgb(68, 171, 247);
}
/取消默认框/
#male{
display: none;
}
复制代码
深圳网站建设www.sz886.com