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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-23

浏览次数：次

返回列表

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

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

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

基本概念：: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)弱化非选中项。

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

92 查看详情 Avatar 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)，能有效减少对J*aScript的依赖，提升页面响应速度与可访问性。关键是结构清晰、选择器准确，避免样式冲突。

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

# 并结合 # 化工产品seo运营 # 谈谈我对seo的理解 # 娄底抖音seo搜索优化 # 关于网站建设入门的论文 # 伊宁软件优化网站 # 零售业网络推广营销 # 湘西品牌网站建设优势 # 郑州软文推广营销方法 # 试卷网站建设文案 # seo站内优化的方法 # 也可 # 多个 # 不均匀 # css # 中不 # 选项卡 # 自定义 # 选择器 # 单选框 # 复选框 # 伪元素 # js # java # javascript # :not # :checked