给 添加灰态样式需用 select:disabled { color: #999 !important; background-color: #f5f5f5 !important; cursor: not-allowed; opacity: 0.7; }，因浏览器UA样式会覆盖，!important 必须；自定义下拉组件需针对其生成的class写CSS。
给
直接给 select:disabled 设置 color 和 background-color 就能生效，但浏览器默认行为会覆盖部分样式（比如 Chrome 会强制加灰色背景、Firefox 会锁死文字颜色），必须用 !important 或更具体的规则覆盖。
select:disabled 的兼容性与常见失效原因
IE9+、Edge、Chrome、Firefox 都支持 :disabled 伪类，但默认禁用态渲染逻辑不同：
- Chrome 会忽略你设的
background-color，除非加上-webkit-appearance: none并重置border和background - Firefox 对
color的控制较弱，需配合::-moz-placeholder类似思路（实际无效），真正有效的是强制color: #999 !important - 所有浏览器下，
cursor: not-allowed都可靠，建议必加
推荐的最小可用 CSS 规则
以下规则在主流浏览器中稳定生效，不依赖 JS，也不破坏可访问性：
select:disabled {
color: #999 !important;
background-color: #f5f5f5 !important;
cursor: not-allowed;
opacity: 0.7;
}
说明：
立即学习“前端免费学习笔记（深入）”；
-
opacity: 0.7比纯灰背景更直观体现“不可操作”，且不影响文字可读性 -
!important是绕过浏览器 UA 样式表的必要手段，不是代码坏味道 - 不要用
pointer-events: none—— 它会让屏幕阅读器完全跳过该控件
如果用了自定义下拉（如 Select2 / Choices.js）怎么办
这类库会把原生 设为 display: none，禁用态由 JS 控制 class，CSS 必须针对其生成的 DOM：
- Select2：匹配
.select2-container--disabled或.select2-container .select2-selection--disabled - Choices.js：匹配
[data-type*=select-one].is-disabled - 务必检查渲染后的 HTML 结构，用浏览器 DevTools 确认最终生效的 class 名
原生 :disabled 规则对这些组件完全无效，别白费劲。
