input:disabled没生效最常见原因是元素无原生disabled属性或标签不支持，如div、span或type="hidden"的input；应检查DOM中是否存在disabled属性且标签为input、button等原生表单控件。
input:disabled 为什么没生效
最常见原因是元素没真正带 disabled 属性，或者用了不支持的标签。比如 <div disabled> 或 <span disabled> 不会被 :disabled 匹配——它只认原生表单控件。另外，<input type="hidden" disabled> 也无效，因为 type="hidden" 被规范排除在 :disabled 作用范围外。
检查方式很简单：打开浏览器开发者工具，确认目标元素 DOM 上确实存在 disabled 属性（不是 class、data-* 或自定义属性），且标签是 input、button、select、textarea、option 或 fieldset 之一。
如何让禁用元素看起来更“灰”
直接设 opacity 最省事，但要注意副作用：它会让子元素（比如图标、内联 SVG）也变透明。更稳妥的做法是分别调低背景、文字和边框颜色：
-
input:disabled→ 推荐用background-color: #f5f5f5+color: #777+border-color: #ddd -
button:disabled→ 加上cursor: not-allowed，这是用户感知“不可点”的关键信号 - 避免全量写
:disabled { opacity: 0.6 }，容易导致嵌套内容模糊、可读性下降
:disabled 和 [disabled] 有什么区别
:disabled 是语义伪类，只匹配浏览器识别为“禁用状态”的原生表单控件；[disabled] 是属性选择器，只要 HTML 里写了 disabled 属性就匹配，不管语义是否成立。
立即学习“前端免费学习笔记（深入）”；
这意味着：
-
<div disabled>xxx</div>→ 不匹配:disabled，但匹配[disabled] -
<input disabled>→ 两者都匹配 - 动态用 JS 设置
el.disabled = true，会触发:disabled样式更新；但用el.setAttribute('disabled', '')才能确保[disabled]生效
日常开发中优先用 :disabled，它是标准、语义清晰、自动响应状态变化；仅当需要兜底兼容旧环境或处理非标元素时才考虑 [disabled]。
禁用复选框/单选按钮的特殊处理
这类控件在禁用时，勾选状态仍可能显示，但用户无法操作。单纯用 input[type="checkbox"]:disabled 只能改外层样式，内部对勾图形往往不受影响。
更可控的方式是组合伪类：
-
input[type="checkbox"]:disabled:checked→ 专门处理“已勾选且禁用”的情况，可加opacity: 0.7或换浅色对勾图标 - 如果用了自定义 checkbox（比如用
<label>+<span>模拟），:disabled完全不生效，必须靠 JS 切换 class 控制样式
别指望 :disabled 能穿透到伪元素（如 ::before）去改对勾颜色——它只作用于元素自身，自定义渲染逻辑得自己补。
