禁用表单控件需同时满足DOM属性、CSS样式和交互行为三者一致：设置原生disabled属性，用button:disabled等显式声明grayscale(0.8)与opacity，并在forced-colors模式下用GrayText等系统色兜底。
禁用表单控件并让它稳定变灰，关键不是只加 disabled 或只写 button:disabled { filter: grayscale(1) } —— 这两者单独用，90% 的项目都会在 Safari、旧 Chrome 或高对比度模式下失效。
为什么 button:disabled 的 filter 样式经常不生效
浏览器对原生 disabled 元素的样式渲染有保留策略：button:disabled 伪类只匹配真实 DOM 中带 disabled 属性的原生按钮（如 <button disabled>），不匹配 <div disabled="true"> 或 Vue/React 封装组件上透传的 props。更常见的是：你用了 pointer-events: none 或 JS 拦截点击，却误以为 :disabled 会响应。
验证方式很简单：打开 DevTools，手动删掉元素上的 disabled 属性，看灰度是否同步消失 —— 如果没变，说明压根没走这个伪类。
-
filter: grayscale()在 iOS Safari 和部分安卓 WebView 中会被跳过渲染，不是你 CSS 写错了，是兼容断层 - 写成
disabled="false"或disabled="0"没用，disabled是布尔属性，存在即生效 -
fieldset上设disabled可批量禁用子控件，但子元素的:disabled伪类仍需各自匹配
真正可控的禁用视觉方案（三者必须同时存在）
光靠 CSS 灰度或 JS 控制点击，都不算完整禁用。必须同步 DOM 状态、CSS 渲染和交互行为：
立即学习“前端免费学习笔记（深入）”；
- DOM 层：确保是原生表单控件（
<input>、<select>、<button>、<option>），且真实设置disabled属性（el.disabled = true或<button disabled>） - CSS 层：用
button:disabled或自定义 class（如.is-disabled），显式声明transition: filter 0.2s ease, opacity 0.2s ease；推荐grayscale(0.8)而非grayscale(1)，避免浅色背景下发糊 - 行为层：JS click handler 开头加
if (el.disabled) return；同时加cursor: not-allowed，别依赖pointer-events: none（它会同时禁用键盘焦点）
示例（可靠写法）：
button:disabled {
filter: grayscale(0.8);
opacity: 0.6;
cursor: not-allowed;
transition: filter 0.2s ease, opacity 0.2s ease;
}
@media (forced-colors: active) {
button:disabled {
color: GrayText;
background-color: ButtonFace;
}
}
单个 option 禁用与整个 select 禁用的区别
<option disabled> 和 <select disabled> 完全是两回事，混用会导致逻辑混乱：
-
<option value="sh" disabled>上海</option>：仅该选项变灰不可选，下拉框仍可展开，其它选项正常可用，表单提交时该值不会被包含 -
<select disabled>：整个下拉框置灰、无法聚焦、不能展开，所有option都不可交互 - 两者可共存，比如政策限制某城市暂不可选，但下拉框仍要供用户选其它城市
- JS 动态控制用
optionEl.disabled = true，不要用setAttribute('disabled', '')
容易被忽略的高对比度模式 fallback
Windows 高对比度模式或 macOS 的“增加对比度”开启后，filter 会被系统强制忽略 —— 此时灰度完全消失，按钮看起来像还能点。必须用 @media (forced-colors: active) 显式重置颜色：
- 禁用状态下的
color建议设为GrayText（系统语义色） -
background-color设为ButtonFace，保持与系统按钮一致 - 别只靠灰度表达状态，屏幕阅读器和键盘用户依赖的是
disabled属性本身，不是视觉
最常漏掉的，其实是语义和行为的一致性：按钮看着灰了，但 Tab 还能聚焦、回车还能触发、屏幕阅读器仍读作“按钮”，这才是真问题。
