Chrome及移动端option标签hover/focus背景色修改CSS无效问题

问题分析 #

Chrome浏览器里，原生<select>的<option>标签在hover或聚焦时会套用默认样式，移动端视图下聚焦状态的颜色对比度极低，导致内容难以辨认。但直接用CSS修改<option>的hover/focus样式通常无效——浏览器对原生表单控件的样式限制极严格，很多属性哪怕加了!important也无法覆盖默认规则。

原始代码 #

HTML #

<select
  id="nf-field-6"
  name="nf-field-6"
  aria-invalid="false"
  aria-describedby="nf-error-6"
  class="ninja-forms-field nf-element"
  aria-labelledby="nf-label-field-6"
>
  <option value="AL" selected="selected">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
</select>

尝试无效的CSS #

select#nf-field-6 > option:hover,
select#nf-field-6 > option:focus
{
    background-color:#084d91 !important;
}

可行解决方案 #

方案1：自定义下拉组件（推荐） #

放弃原生<select>，用HTML+CSS+JS模拟下拉菜单，这样能完全控制所有状态的样式，包括hover、聚焦、选中状态的背景色和文字颜色。示例结构如下：

<div class="custom-select">
  <div class="select-trigger">Alabama</div>
  <div class="select-options">
    <div class="option selected" data-value="AL">Alabama</div>
    <div class="option" data-value="AK">Alaska</div>
    <!-- 其他选项 -->
  </div>
</div>

通过CSS设置.option:hover、.option:focus、.option.selected的样式，再用JS实现下拉展开/收起、选择逻辑即可。

方案2：针对Chrome的有限样式调整 #

如果必须保留原生<select>，可以尝试Chrome专属的伪元素和属性调整，但效果可能因浏览器版本而异：

/* 修改下拉面板背景 */
select#nf-field-6::-webkit-select-dropdown {
  background-color: #fff;
}

/* 修改选中选项的样式 */
select#nf-field-6 option:checked {
  background-color: #084d91 !important;
  color: #fff;
}

注意：这种方式仅能修改选中的选项样式，hover状态仍无法完全控制，移动端聚焦状态的改善效果也有限。

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