CSS表单样式：checked和disabled控制外观

本文深入解析了CSS中`:checked`和`:disabled`两个关键伪类的使用逻辑、适用范围与实战陷阱：`:checked`专用于复选框和单选按钮，精准匹配被选中状态本身，需结合相邻/兄弟选择器才能影响关联文本或指示器，且不支持``等元素；`:disabled`则广泛匹配所有禁用表单控件，包括动态设置的禁用状态，但对`

`内继承禁用的子元素需显式声明选择器；二者可安全组合实现“已选但不可改”的复杂交互样式，但必须警惕DOM结构错位、隐藏元素导致交互失效、优先级覆盖及跨Shadow DOM限制等常见问题——真正决定样式成败的，从来不是语法多炫酷，而是HTML语义结构与CSS选择器之间严丝合缝的对应关系。

用 :checked 选中复选框/单选按钮后改变样式

只有 <input type="checkbox"> 和 <input type="radio"> 支持 :checked，<select> 或 <textarea> 不行。它匹配的是当前被用户勾选（或通过 JS 设置 checked = true）的元素本身，不是它的父容器或兄弟元素——想影响旁边文字或包装盒，得靠相邻/子代选择器配合。

常见写法示例：

input[type="checkbox"]:checked + label {
  color: #2c7be5;
  font-weight: bold;
}
input[type="radio"]:checked ~ .control-indicator::after {
  content: "●";
  color: #2c7be5;
}

注意点：

• :checked 不触发重排，纯 CSS 实现，性能好
• 不能用在 上（option:checked 无效）；浏览器不支持该伪类作用于下拉项
• 如果 checkbox 是隐藏的（display: none），:checked 仍生效，但视觉上看不到变化——得确保关联的可见元素可被选择器捕获

用 :disabled 控制表单控件禁用态外观

:disabled 匹配所有设置了 disabled 属性的表单元素：input、button、select、textarea、optgroup、option。它不看 readonly，也不管是 HTML 属性还是 JS 动态设置的 disabled = true，只要 DOM 属性存在就命中。

典型用法：

input:disabled,
select:disabled,
button:disabled {
  background-color: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
  opacity: 0.7;
}

容易踩的坑：

• fieldset:disabled 会让整个字段组内所有可表单控件都进入禁用态，但 :disabled 伪类**不会**自动匹配这些“继承禁用”的子元素——必须显式写 fieldset:disabled input 才能样式生效
• input[disabled] 和 input:disabled 效果一样，但后者语义更准，且兼容性更好（IE9+）
• 某些旧版 Safari 对 option:disabled 的样式支持不稳定，建议用 select:disabled option 统一降级处理

:checked 和 :disabled 组合使用的边界情况

这两个伪类可以连用，比如 input:checked:disabled，表示“既被选中又被禁用”的复选框——常见于权限配置页中已分配但不可修改的选项。

但要注意逻辑顺序和浏览器行为：

• input:disabled:checked 和 input:checked:disabled 等价，顺序不影响匹配结果
• Chrome/Firefox 中，禁用的 radio 按钮即使被 JS 强行设为 checked = true，:checked:disabled 依然能匹配；但部分移动端 WebView 可能忽略这种组合
• 不要依赖 :checked:disabled 来隐藏控件——它只是样式层，DOM 状态仍存在，提交时该字段值照常发送（除非同时加了 name 移除或 formdata 过滤）

为什么有时候 :checked 样式不生效？

最常见原因是标签结构没对上。CSS 无法跨层级“反向影响”父元素，比如你想让整个