opacity会使整个元素及子元素一同变透明，导致文字可读性暴跌、图标模糊、焦点仍可进入；推荐用rgba()设背景色或filter替代，并搭配color、cursor等属性实现真正禁用效果。
直接用 opacity 降透明度是最简单但风险最高的做法——它会让文字可读性暴跌、图标糊成一片、键盘焦点仍能进入，且无法修复 Safari 下的灰度渲染异常。
为什么 opacity: 0.6 单独使用不推荐
浏览器对禁用元素的默认行为是“视觉弱化 + 行为拦截”，但 opacity 只管前者。实际问题包括：
-
opacity会把所有子内容（文字、图标、伪元素）一并变淡，深色模式下color: #999在opacity: 0.6下对比度常跌破 WCAG 4.5:1 - 输入框里带图标的
input[type="search"]或按钮含 SVG，透明后细节全丢 - 它不改
cursor，用户悬停时仍显示默认指针，误以为可点 - 键盘 Tab 仍能聚焦该元素，屏幕阅读器照常播报“按钮，可点击”
必须搭配的三项基础样式
只加 opacity 是半残废状态。真正可用的禁用样式至少包含：
-
opacity: 0.6或opacity: 0.7—— 用于整体氛围弱化，数值别低于 0.5（太糊）或高于 0.8（不够明显） -
color: #999（或color: rgba(0, 0, 0, 0.6)）—— 显式控制文字颜色，避开 opacity 对 contrast 的干扰 -
cursor: not-allowed—— 浏览器不会自动加，漏掉就等于没禁用提示
示例：
button:disabled {<br> opacity: 0.7;<br> color: #999;<br> background-color: #f5f5f5;<br> border-color: #ddd;<br> cursor: not-allowed;<br>}
不同表单控件对 opacity 的响应差异
不是所有元素都老老实实服从 opacity：
-
input[type="date"]在 Safari 中禁用后仍显示下拉箭头，opacity不影响该伪元素，需额外写input[type="date"]:disabled::-webkit-calendar-picker-indicator { opacity: 0; } -
input[type="file"]的文件名区域（::file-selector-button）不受父级opacity影响，得单独设color和background -
input[type="range"]在 Firefox 中滑块可能完全消失，此时opacity失效，应优先调background轨道色
比 opacity 更稳的替代方案
如果项目要兼容旧版 Safari 或对可读性要求高，建议放弃纯 opacity，改用：
-
filter: grayscale(100%) brightness(0.95)—— 比单纯灰度更保细节，brightness防止 Safari 渲染过暗 -
background-color+color+border-color组合 —— 稳定、语义清晰、无障碍友好，且不依赖滤镜支持 - 对非原生元素（如
div模拟按钮），必须用类名（如.is-disabled）+aria-disabled="true"+tabindex="-1"，:disabled完全无效
真正麻烦的从来不是怎么写 opacity，而是你有没有确认：DOM 上真有 disabled 属性、框架透传到位、键盘焦点被正确跳过、屏幕阅读器播报的是“已禁用”而非“按钮”。漏掉任意一环，用户就会点下去——然后发现它居然有反应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
