CSS :checked 控制复选框和单选按钮样式

CSS 的 `:checked` 伪类是实现无 JavaScript 表单交互的利器，它能精准匹配被选中的复选框和单选按钮，并通过与 `label` 标签、伪元素（如 `::before`/`::after`）及兄弟选择器（`+`、`~`）协同工作，轻松打造自定义开关、展开收起内容、模态框等动态效果——无需一行 JS，就能让表单既美观又富有响应性，是提升用户体验与代码轻量化的实用技巧。

:checked 是 CSS 中的一个伪类，用于匹配处于“选中”状态的单选按钮（radio）和复选框（checkbox）。通过它，我们可以为用户已勾选的表单控件自定义样式，提升界面交互体验。这个伪类特别适用于创建无 JavaScript 的开关、模态框触发器或个性化选择控件。

基本语法与适用元素

:checked 只能应用于具有 checked 属性的表单元素，主要是 和 ，也包括 （在某些浏览器中）。

基本写法如下：

input[type="checkbox"]:checked {
  accent-color: #4078c0;
}

input[type="radio"]:checked + label::before {
  background-color: #005fcc;
}

改变默认外观

浏览器默认的复选框和单选按钮样式较为单调，使用 :checked 结合其他 CSS 技巧可以完全重绘它们的视觉表现。

• 隐藏原始输入框：使用 appearance: none 或 display: none 移除默认样式。
• 用 ::before 或 ::after 伪元素绘制自定义图形。
• 利用 :checked 控制伪元素的显示状态，比如切换颜色、形状或添加对勾符号。

示例：自定义复选框

.custom-checkbox {
  position: relative;
  width: 20px;
  height: 20px;
}

.custom-checkbox input {
  appearance: none;
  opacity: 0;
}

.custom-checkbox::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background: white;
}

.custom-checkbox input:checked + .custom-checkbox::before {
  background: #4078c0;
  border-color: #4078c0;
}

.custom-checkbox input:checked + .custom-checkbox::after {
  content: '✔';
  position: absolute;
  top: 1px;
  left: 4px;
  color: white;
  font-size: 14px;
}

配合标签实现无JS交互

label 元素的 for 属性与 input 关联后，点击 label 即可触发 input 的选中状态变化。结合 :checked，可以控制其他元素的显示或样式，实现简单的交互效果。

常见用途包括：

• 制作开关按钮：滑块式 toggle，背景色随状态切换。
• 展开/收起内容：选中 checkbox 后，用 ~ 选择器显示隐藏区域。
• 灯箱或弹窗：用隐藏的 checkbox 触发 modal 显示。

示例：点击展开内容

#toggle {
  display: none;
}

#content {
  display: none;
}

#toggle:checked ~ #content {
  display: block;
}

HTML 结构：

点击展开
这里是被隐藏的内容

基本上就这些。合理使用 :checked 能增强表单的可用性和美观度，尤其适合轻量级交互场景，无需 JavaScript 也能实现动态效果。关键是理解其与 label、伪元素和兄弟选择器的配合方式。

到这里，我们也就讲完了《CSS :checked 控制复选框和单选按钮样式》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于:checked,CSS伪类的知识点！