统一 disabled 表单样式需用 :disabled 伪类显式重置 background-color、color、border-color、cursor、opacity 等属性；fieldset[disabled] 下子元素不匹配 :disabled，须用后代选择器；disabled 元素应禁用 outline 防止闪现。
disabled 表单元素在 Chrome/Firefox/Safari 里长得不一样
不同浏览器对 disabled 的默认样式处理差异很大：Chrome 给灰底+浅灰文字，Firefox 文字变灰但背景不变，Safari 还可能保留聚焦边框。这不是 bug，是规范允许的“用户代理样式自由裁量权”。想统一，不能只靠 opacity: 0.6 或简单设 color: #999 —— 那只会掩盖问题，不解决底层渲染逻辑差异。
用 :disabled 伪类重置所有可样式化属性
必须显式覆盖所有可能被 UA 样式影响的属性，否则 Safari 可能忽略 background，Firefox 可能坚持用系统字体粗细。重点不是“禁用时好看”，而是“禁用时和启用时只差一个状态，其余完全一致”。
推荐这样写：
input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
background-color: #f5f5f5;
color: #666;
border-color: #ddd;
cursor: not-allowed;
opacity: 1; /* 必须重置，避免继承父级 opacity */
}
-
cursor: not-allowed是跨浏览器最稳定的禁用提示，比仅靠颜色更可靠 - 别漏掉
textarea和select—— 它们在 Firefox 下常被忽略 -
opacity: 1很关键：如果父容器设了opacity: 0.8，disabled元素会叠加上去，导致文字过淡，且无法选中（Safari 尤其敏感）
fieldset[disabled] 会阻断子元素 :disabled 匹配
当用 <fieldset disabled></fieldset> 批量禁用一组控件时，内部的 input、button 等**不会触发 :disabled 伪类**。这是 HTML 规范行为，不是 CSS 失效。此时你写的 input:disabled 根本不生效。
解决方案只有两个：
- 改用 JavaScript 手动给每个子元素加
disabled属性（然后你的:disabled规则才起作用） - 直接对
fieldset[disabled]写样式，并用后代选择器控制内部元素：fieldset[disabled] input, fieldset[disabled] button { ... }
后者更轻量，但要注意：它无法区分“字段组禁用”和“单个控件禁用”，如果两者共存，得靠额外 class 控制优先级。
disabled 状态下 focus-visible 和 outline 的冲突
现代浏览器（尤其 Chrome 120+）支持 :focus-visible，但 disabled 元素理论上不该获得焦点 —— 实际上，某些键盘操作（比如 tab 到它再 shift+tab）仍可能短暂触发 :focus，导致 outline 闪现。这不是 bug，是焦点管理未完全同步。
稳妥做法是彻底切断 outline：
input:disabled:focus,
input:disabled:focus-visible,
button:disabled:focus,
button:disabled:focus-visible {
outline: none;
}
注意顺序：把 :disabled:focus 放前面，避免被更宽泛的 :focus-visible 规则覆盖。另外，不要用 outline: 0，部分旧版 IE 不识别，outline: none 兼容性更好。
真正难搞的是那些用 JS 模拟 disabled 行为（比如只加 pointer-events: none 却没设 disabled 属性）的组件——它们既不响应 :disabled，又可能意外获焦。这种得从源头改，CSS 救不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
