CSS如何选中未选中的复选框

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《CSS如何选中未选中的复选框》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

要选中未被勾选的复选框，应使用 :not(:checked) 伪类控制关联元素（如 label 或其子元素）样式，而非直接设置复选框本身；推荐默认设未选中态样式，再用 :checked 覆盖已选中状态，以提升兼容性与可维护性。

要选中未被勾选的复选框，可以使用 :not(:checked) 伪类组合，但需注意：该选择器本身不能直接作用于 <input type="checkbox"> 元素来设置其样式（因为复选框原生控件无法通过 CSS 设置“未选中时的外观”），真正有效的是用它来控制**关联元素**（比如旁边的标签、父容器或后续兄弟元素）的样式。

正确用法：控制关联标签或容器

常见做法是将 与复选框显式关联（用 for 属性或包裹结构），再用 :not(:checked) 选中未勾选状态下的 label 或其子元素：

• HTML 推荐结构（隐式关联）：
  <input type="checkbox"> 我同意条款
• CSS 示例（给未选中时的 label 添加灰色文字）：
  label input[type="checkbox"]:not(:checked) + span { color: #999; }
  或更稳妥地（利用 label 包裹）：
  label input[type="checkbox"]:not(:checked) ~ span { opacity: 0.7; }

替代方案：用 :checked 反向控制更可靠

实际开发中，:not(:checked) 在部分旧浏览器（如 IE）支持不完整，且逻辑易出错。更推荐写法是默认样式设为“未选中态”，再用 :checked 覆盖已选中状态：

• 默认设置 label 样式（即未选中时）：
  label { color: #666; font-weight: normal; }
• 仅当勾选后才改变：
  input[type="checkbox"]:checked + label { color: #007bff; font-weight: bold; }

注意事项

• :not(:checked) 只对 <input type="checkbox"> 和 <input type="radio"> 有效，对其他类型无效
• 不能用它修改复选框本身的方框（如背景、边框），因原生 checkbox 的 UI 由系统渲染，CSS 可控性极低；如需自定义外观，应隐藏原生控件，用 ::before/::after 模拟
• 确保 HTML 结构满足 CSS 选择器的层级关系（如相邻兄弟 +、通用兄弟 ~ 或父子关系）

今天关于《CSS如何选中未选中的复选框》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！