:checked 是状态选择器，不直接渲染样式，需通过隐藏原生控件并联动 label 或伪元素实现视觉效果；结构必须正确（id/for 关联或嵌套），否则点击无效。

CSS :checked 本身不渲染样式，它只是状态选择器；真正起作用的是用它联动兄弟元素（比如 label 或伪元素）来模拟外观——直接给 input[type="checkbox"] 或 input[type="radio"] 加样式是无效的。

为什么 input:checked 看不到效果？

浏览器对原生表单控件的样式控制极弱，input[type="checkbox"] 和 input[type="radio"] 默认无法用 CSS 设置宽高、背景色或边框圆角。直接写 input:checked { background: blue; } 不会生效——因为该元素本身不可见渲染区域，且被 UA 样式屏蔽。

• 必须配合 display: none 隐藏原生控件
• 用相邻兄弟选择器（+）或通用兄弟选择器（~）选中紧随其后的 label 或自定义容器
• 或者用伪元素（如 label::before）在 label 上绘制视觉层

用 label + input + label 结构实现可点击区域

关键前提是：input 必须有 id，label 用 for 关联，或把 input 套进 label 内部。否则点击 label 不会触发选中状态，:checked 就永远不匹配。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 推荐结构：<input type="checkbox" id="agree"><label for="agree">我同意</label>
• 隐藏 input：input[type="checkbox"] { display: none; }
• 用 input:checked + label::before 绘制勾选图标（例如 content: "✓"; 或背景图）
• 确保 label 有足够点击热区（比如加 padding），否则体验差

单选框组怎么保证互斥且样式同步？

单选框（input[type="radio"]）依赖 name 属性分组，但 :checked 只作用于当前选中的那个。如果想让“未选中项”恢复默认态，不需要额外 JS —— CSS 天然支持。

• 同一组 radio 必须共享 name 值，例如 name="theme"
• 样式规则要分别写：input[value="dark"]:checked + label { color: #fff; background: #333; }
• 不要用 input:checked + label 通配，否则所有 label 都会响应任意一个 radio 的选中状态
• 注意：disabled 状态下 :checked 依然匹配，但用户无法操作，需额外加 :disabled 过滤

移动端点击失效或延迟怎么办？

部分安卓 WebView 或旧版 iOS Safari 对 label 的点击事件响应不灵敏，尤其当伪元素覆盖了实际点击区域时。

• 给 label 加 cursor: pointer 和 -webkit-tap-highlight-color: transparent
• 避免只靠 label::after 做点击靶区——它默认不参与事件捕获，应把交互区域设在 label 本体上
• 测试真机：有些机型要求 label 内至少包含一个非空文本节点，纯伪元素可能不触发
• 极端情况可加 onclick="void(0)" 强制激活 tap，但属于兜底手段，优先调结构

最常被忽略的一点：所有基于 :checked 的视觉反馈都依赖 DOM 结构顺序和关联性。一旦 input 和 label 被 Vue/React 动态重排、或用了 Fragment 导致兄弟关系断裂，样式就立即失效——这不是 CSS 问题，是结构没对齐。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！