css伪类:checked实现复选框样式修改
使用:checked伪类可自定义复选框样式，通过隐藏原始输入框，结合label关联和CSS伪元素实现视觉效果。首先将input[type="checkbox"]设为opacity:0以隐藏，利用label的for属性与其id关联，点击label即可触发input状态变化。接着使用+选择器控制相邻label的::before和::after伪元素绘制自定义框和对勾。当复选框被选中时，:checked伪类激活，改变背景色并显示✓符号。注意确保id与for一致以保证功能正常，推荐添加transition提升交互流畅度，兼容现代浏览器及IE9+。
使用CSS伪类:checked可以轻松控制复选框（checkbox）被选中时的样式。由于复选框本身是表单元素，直接修改其外观有限，但结合
基本原理
:checked伪类用于匹配被选中的单选按钮或复选框。常配合隐藏原始输入框，用CSS绘制新的样式，并通过
实现步骤
以下是实现自定义复选框样式的常见方法：
- 将原始input[type="checkbox"]隐藏
- 利用label关联input，点击label即操作input状态
- 使用
:checked++或~选择器控制后续元素样式 - 通过伪元素或背景图展示自定义选中状态
代码示例
下面是一个简洁的自定义复选框实现：
CSS样式：
/* 隐藏原始复选框 */#custom-checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
}
/ 自定义方框样式 /
custom-checkbox + label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #999;
border-radius: 4px;
margin-right: 8px;
vertical-align: middle;
}
/ 选中状态样式 /
custom-checkbox:checked + label::before {
background-color: #4CAF50;
border-color: #4CAF50;
}
/ 可加入对勾符号 /
custom-checkbox:checked + label::after {
content: "✓";
color: white;
font-weight: bold;
text-align: center;
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
vertical-align: middle;
margin-left: -16px;
}
注意事项
确保input和label正确关联（通过id和for），否则无法触发切换。该方法兼容性良好，支持现代浏览器及IE9+。如需更复杂动画，可添加transition增强视觉反馈。
基本上就这些，核心是利用:checked响应状态变化，再用CSS自由发挥样式表现。
