CSS设置select下拉框disabled选项未被hover时的颜色显示问题

问题原因 #

原生<select>的<option>元素受浏览器默认UA样式约束，未触发hover状态时，浏览器会自动给带disabled属性的选项添加半透明、默认灰色文字的内置样式，覆盖你自定义的color规则。

可用解决方案 #

• 方案1：强制覆盖浏览器默认样式
  给select和disabled选项添加以下CSS，清除默认样式限制、覆盖默认半透明属性即可生效：

  /* 清除select的浏览器默认外观 */
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* 可按需补充自定义下拉箭头样式，比如用background-image插入箭头图标 */
  }
  /* 强制指定disabled选项样式，优先级高于浏览器默认规则 */
  select option:disabled {
    color: #f1f1f1 !important;
    opacity: 1 !important;
    /* 替换为你实际使用的下拉菜单背景色，避免文字和背景对比度不足 */
    background-color: #2b2b2b !important;
  }
  

• 方案2：使用自定义模拟下拉组件
  原生select的option样式在不同浏览器中差异较大，部分老旧浏览器对option的样式修改限制较多。如果需要全浏览器一致的展示效果，建议用div、ul等普通元素自定义实现下拉交互逻辑，可以完全自主控制所有状态的样式，不会受浏览器默认规则限制。

内容的提问来源于stack exchange，提问作者Sachin Jadhav