在网页开发中，原生的复选框样式由浏览器默认渲染，往往和整体页面设计风格不匹配，很多场景下需要自定义复选框的外观。CSS的:checked伪类可以在复选框、单选框等表单元素被选中时匹配对应的元素，借助这个特性可以轻松实现复选框选中后的背景、边框样式变化，不需要依赖JavaScript就能完成交互效果。
:checked伪类的基本介绍
:checked是CSS3新增的状态伪类，用于匹配处于选中状态的表单元素，支持的元素包括input[type="checkbox"]、input[type="radio"]以及select元素中的option。当元素的状态变为选中时，该伪类就会生效，对应的样式规则会被应用。
它的基本语法格式如下：
/* 匹配所有选中的复选框 */
input[type="checkbox"]:checked {
样式规则
}
实现复选框样式变化的核心思路
原生复选框的样式很难直接修改，通常的实现思路是隐藏原生复选框，然后用其他元素模拟复选框的外观，通过:checked伪类控制模拟元素的样式变化。具体步骤如下：
- 将原生
input[type="checkbox"]设置为隐藏，比如设置display: none或者opacity: 0并脱离文档流 - 使用
label元素关联复选框，因为label的点击事件可以触发对应复选框的状态变化 - 在
label内部或者后面添加用于模拟复选框的元素，比如用span标签作为模拟框 - 通过
input:checked + 模拟元素或者input:checked ~ 模拟元素的选择器，设置选中后的背景、边框样式
完整实现示例
下面是一个完整的自定义复选框示例，实现了选中时背景变蓝、边框颜色加深的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义复选框示例</title>
<style>
/* 隐藏原生复选框 */
.custom-checkbox input {
display: none;
}
/* 模拟复选框的基础样式 */
.custom-checkbox .checkbox-mock {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #fff;
cursor: pointer;
transition: all 0.2s ease;
vertical-align: middle;
margin-right: 8px;
}
/* 选中时的样式变化 */
.custom-checkbox input:checked + .checkbox-mock {
background-color: #1890ff;
border-color: #096dd9;
}
/* 选中时添加对勾标记 */
.custom-checkbox input:checked + .checkbox-mock::after {
content: "";
display: block;
width: 6px;
height: 12px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-left: 6px;
margin-top: 1px;
}
/* label整体样式 */
.custom-checkbox label {
cursor: pointer;
font-size: 14px;
color: #333;
}
</style>
</head>
<body>
<div class="custom-checkbox">
<label>
<input type="checkbox">
<span class="checkbox-mock"></span>
同意用户服务协议
</label>
</div>
<div class="custom-checkbox">
<label>
<input type="checkbox">
<span class="checkbox-mock"></span>
记住登录状态
</label>
</div>
</body>
</html>
常见问题解答
为什么直接修改input[type="checkbox"]的样式不生效
原生复选框属于浏览器内置的替换元素，不同浏览器对其样式的支持程度差异很大，大部分样式属性都无法直接生效，因此才需要隐藏原生元素，用其他元素模拟外观。
:checked伪类只能修改相邻元素的样式吗
不是，:checked伪类可以结合兄弟选择器使用，+是相邻兄弟选择器，只能匹配紧跟在后面的第一个元素；~是通用兄弟选择器，可以匹配后面所有符合条件的兄弟元素，开发者可以根据页面结构选择合适的选择器。
如何兼容低版本浏览器
:checked伪类在IE9及以上版本都支持，如果需要兼容更低版本的浏览器，可以搭配JavaScript监听复选框的change事件，通过添加删除类名的方式实现样式变化，作为降级方案。
CSS伪类_checked复选框样式背景修改边框修改修改时间：2026-07-07 11:51:24