css :checked伪类如何控制复选框样式

2025-10-14 00:00:00 作者：P粉602998670

:checked伪类用于设置被选中的复选框或单选按钮的样式，如input[type="checkbox"]:checked{accent-color:red;}改变勾选色；通过隐藏原生控件并结合label与相邻兄弟选择器（+）可自定义外观，例如.custom-checkbox input:checked + .checkmark::after显示自定义对号；利用#toggle:checked ~ #content可控制后续元素显示，实现点击展开内容等交互效果。

使用 :checked 伪类可以针对被选中的复选框（checkbox）或单选按钮（radio）设置特定样式。它适用于或元素，当它们处于选中状态时触发。

基本语法与作用

:checked 选择器匹配所有被用户选中的表单控件，常见于复选框和单选按钮。

示例：

input[type="checkbox"]:checked {
  accent-color: red;
}

这段代码会让选中的复选框的勾选颜色变为红色。现代浏览器支持 accent-color 属性来快速改变原生控件的颜色。

自定义复选框外观（隐藏原生控件）

若想完全自定义样式，通常需要隐藏原生复选框，并用 CSS 构建视觉替代元素。

HTML 结构：


  
  
  我是自定义复选框

CSS 样式：

.custom-checkbox .checkmark {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 4px;
  margin-right: 8px;
  position: relative;
}

.custom-checkbox input:checked + .checkmark::after {
  content: "✔";
  color: green;
  font-size: 14px;
  position: absolute;
  top: -2px;
  left: 2px;
}

这里利用了相邻兄弟选择器（+）在输入框被选中时，修改旁边的 .checkmark 元素内容。