17370845950

:checked伪类可精准捕获checkbox选中状态，结合+或~选择器控制相邻元素样式；需隐藏原生checkbox并用label伪元素自定义外观，支持联动显隐、变色及transition动画，兼容IE9+。

用 :checked 伪类可以精准捕获 checkbox 被选中时的状态，再配合相邻兄弟选择器（+）或子元素关系，就能控制它旁边的标签、图标甚至其他元素的样式。

基础写法：隐藏原生 checkbox，自定义外观

浏览器默认的 checkbox 样式很难统一，通常先把它视觉隐藏，再用 label 或伪元素模拟新样式：

• 把 input[type="checkbox"] 设为 opacity: 0 或 position: absolute; left: -999px，确保可访问性但不干扰布局
• 给关联的 label 添加自定义样式（比如方框、对勾图标）
• 用 input:checked + label 选中后改变 label 的背景、边框或伪元素内容

显示对勾图标：用 ::before / ::after 实现

在 label 上用伪元素画勾，比替换图片更轻量、易缩放：

input[type="checkbox"] { display: none; }
label::before {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid #999;
  margin-right: 8px;
  vertical-align: middle;
}
input:checked + label::before {
  background: #007bff;
  border-color: #007bff;
}
input:checked + label::after {
  content: "✓";
  color: white;
  font-size: 14px;
  position: relative;
  left: -12px;
  top: 1px;
}

联动其他元素：控制附近内容显隐或变色

:checked 不仅能改自己或 label，还能影响后续同级元素（用 ~ 或 +）：

• input:checked ~ .extra-info：让某个说明区块在勾选后才显示
• input:checked + .toggle-text：点击 checkbox 后，紧挨着的文字变成“已启用”
• 配合 transition 可添加平滑颜色/尺寸过渡（注意：content 不能过渡，但 opacity、transform 可以）

注意事项与兼容性

:checked 在所有现代浏览器中都支持（包括 IE9+），但要注意几点：

• 必须是 或 ，普通 input 不适用
• HTML 中 input 和目标元素需在同一层级，且 input 必须在前（否则 + / ~ 无法匹配）
• 如果用 JS 动态设置 checked 属性，CSS 会立即响应，无需额外触发

基本上就这些。关键是结构写对、选择器链理清，不需要 JS 就能做出响应式交互效果。