在网页开发中，默认的复选框样式由浏览器决定，往往和整体页面设计风格不协调，很多场景下需要开发者自定义复选框的外观。css伪类选择器:checked可以精准匹配处于选中状态的表单元素，结合隐藏原生控件、自定义替代元素的方式，就能实现完全个性化的复选框样式，同时保留原本的交互功能。
什么是:checked伪类选择器
css中的:checked伪类选择器用于匹配处于选中状态的表单元素，支持的元素包括<input type="checkbox">、<input type="radio">以及<select>中的<option>。当元素的选中状态发生改变时，对应的样式会自动生效，不需要额外的JavaScript逻辑。
它的基本语法格式如下：
/* 匹配所有选中状态的复选框 */
input[type="checkbox"]:checked {
/* 样式规则 */
}
自定义复选框样式的实现思路
自定义复选框样式的核心思路是隐藏原生的复选框控件，然后用其他元素模拟复选框的外观，通过:checked伪类检测选中状态，切换模拟元素的样式。具体步骤如下：
- 第一步：在HTML中创建复选框和用于模拟外观的替代元素，通常用
<label>包裹复选框和模拟元素，利用<label>的点击关联特性，保证点击模拟元素也能触发复选框的状态切换。 - 第二步：通过css隐藏原生的
<input type="checkbox">元素，比如设置display: none或者opacity: 0配合定位移出可视区域。 - 第三步：为模拟元素设置默认的未选中样式，比如边框、背景色、尺寸等。
- 第四步：使用
:checked伪类选择器，为处于选中状态的复选框对应的模拟元素设置选中样式，比如修改背景色、添加选中图标等。
完整实现示例
下面是一个完整的自定义复选框样式示例，实现了带边框、选中后显示对勾的复选框效果：
HTML结构
<label class="custom-checkbox">
<input type="checkbox" class="checkbox-input">
<span class="checkbox-mock"></span>
<span class="checkbox-text">同意用户协议</span>
</label>
CSS样式
/* 隐藏原生复选框 */
.checkbox-input {
display: none;
}
/* 模拟复选框的基础样式 */
.custom-checkbox {
display: inline-flex;
align-items: center;
cursor: pointer;
font-size: 14px;
color: #333;
}
.checkbox-mock {
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 3px;
margin-right: 8px;
position: relative;
transition: all 0.2s ease;
background-color: #fff;
}
/* 未选中时的hover效果 */
.custom-checkbox:hover .checkbox-mock {
border-color: #409eff;
}
/* 选中状态下的模拟复选框样式 */
.checkbox-input:checked + .checkbox-mock {
background-color: #409eff;
border-color: #409eff;
}
/* 选中后添加对勾图标 */
.checkbox-input:checked + .checkbox-mock::after {
content: "";
position: absolute;
left: 4px;
top: 1px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* 复选框文字样式 */
.checkbox-text {
user-select: none;
}
注意事项
在使用:checked伪类实现自定义复选框时，需要注意以下几点：
- 一定要保证
<label>和复选框的关联，要么用<label>包裹复选框，要么给<label>设置for属性，值为复选框的id，否则点击模拟元素无法触发状态切换。 - 隐藏原生复选框时不要使用
visibility: hidden，这种隐藏方式元素仍然占据空间，可能影响布局，优先选择display: none或者定位移出可视区域的方式。 - 如果需要兼容旧版本浏览器，要确认:checked伪类的支持情况，大部分现代浏览器都已经完全支持该伪类，不需要额外添加前缀。
通过css的:checked伪类选择器，我们可以不依赖任何JavaScript代码，就实现完全自定义的复选框样式，既减少了代码量，也提升了页面的性能，是定制表单元素样式的常用方案。