css 伪类与表单样式_通过 :checked 和 :disabled 改变表单样式_技术教程

:checked仅适用于checkbox和radio，匹配被选中元素本身；:disabled匹配所有禁用表单元素，二者可组合使用，但需注意DOM结构与选择器关系。

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

只有和支持 :checked，或不行。它匹配的是当前被用户勾选（或通过 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 无法跨层级“反向影响”父元素，比如你想让整个 在内部 checkbox 被选中时变色，但没用 ~ 或 + 连接，也没把 checkbox 放在 label 里并用 for/id 关联，那就完全匹配不到。

自查清单：



确认 checkbox/radio 元素本身没有 display: none 或 visibility: hidden（否则无法触发用户交互，也就不会进入 :checked）
检查是否用了 label > input 这类严格嵌套选择器，而实际 HTML 是 label 和 input 并列
确保没有更高优先级的规则（如内联 style 或 !important）覆盖了你的 :checked 样式
在 Shadow DOM 中，:checked 只作用于影子树内的元素，无法穿透到宿主或外部

真实项目里，最麻烦的往往不是语法写错，而是结构和语义没对齐——样式是 DOM 关系的镜像，关系断了，镜像就黑了。