CSS伪类:checked与:not结合应用_复选框与单选框样式控制-css教程-PHP中文网

CSS伪类:checked与:not结合应用_复选框与单选框样式控制

P粉602998670

发布： 2025-11-23 16:04:02

原创

831人浏览过

利用:checked与:not(:checked)伪类可实现无需JavaScript的动态样式切换，通过隐藏原生控件并结合label和兄弟选择器~或+，能自定义复选框、单选框样式，控制选项外观、实现选项卡等内容切换，提升交互体验。

css伪类:checked与:not结合应用_复选框与单选框样式控制

在网页开发中，常需要根据复选框或单选框的选中状态动态改变样式。利用CSS伪类 :checked 与否定伪类 :not(:checked)，可以无需JavaScript实现视觉反馈，提升用户体验。

基本概念：:checked 与 :not(:checked)

:checked 匹配被选中的单选框（radio）或复选框（checkbox）。:not(:checked) 则匹配未被选中的控件。这两个伪类可直接用于input元素，也可配合或其他兄弟元素实现样式联动。

常见用法包括：

隐藏默认输入框，用自定义样式替代
通过 ~ 或 + 选择器影响后续元素的显示
实现开关按钮、选项卡、模态框等交互效果

自定义复选框样式

通过隐藏原生复选框，使用label模拟视觉样式，并结合:checked控制外观。

立即学习“前端免费学习笔记（深入）”；

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.checkbox-label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 4px;
  margin-right: 8px;
}

input:checked + .checkbox-label::before {
  background-color: #007bff;
  border-color: #007bff;
}

input:not(:checked) + .checkbox-label::before {
  background-color: white;
}

点击label时触发input状态变化，::before伪元素根据是否选中显示不同背景。

单选框组的样式控制

对于单选框，常需在多个选项中突出当前选中项。可用:not(:checked)弱化非选中项。

课游记AI

AI原生学习产品

查看详情

.radio-option {
  padding: 10px;
  border: 1px solid #ddd;
  transition: all 0.2s;
}

input[type="radio"]:checked ~ .radio-option {
  background-color: #007bff;
  color: white;
}

input[type="radio"]:not(:checked) ~ .radio-option {
  background-color: #f9f9f9;
  color: #666;
  opacity: 0.7;
}

这种方式适合构建视觉清晰的选择面板，如支付方式、主题切换等。

结合通用兄弟选择器实现复杂布局

使用 ~ 可以让选中状态影响同级的其他元素，例如实现无JS的选项卡或内容切换。

示例：点击某个radio按钮，只显示对应内容区，其余隐藏。

.tab-content {
  display: none;
}

input[value="tab1"]:checked ~ #content1,
input[value="tab2"]:checked ~ #content2 {
  display: block;
}

input:not(:checked) ~ .tab-content {
  display: none;
}

这种结构依赖input位于内容块之前，通过~选择器控制显示逻辑。

基本上就这些。合理使用:checked和:not(:checked)，能有效减少对JavaScript的依赖，提升页面响应速度与可访问性。关键是结构清晰、选择器准确，避免样式冲突。

以上就是CSS伪类:checked与:not结合应用_复选框与单选框样式控制的详细内容，更多请关注php中文网其它相关文章！