Bootstrap custom-select下拉框自定义样式Firefox显示异常求助

嘿，我懂你遇到的这个跨浏览器兼容坑——Bootstrap的custom-select在老版本Firefox（比如你用的59.0.2）里确实会出现这种样式不一致的情况，尤其是下拉选项部分。

问题根源 #

Chromium系浏览器会自动把<select>的样式继承给内部的<option>，但老版本Firefox对原生<select>组件的样式渲染逻辑不一样，它的下拉选项列表自带的默认样式优先级更高，不会直接继承父元素的内联样式，所以你设置的颜色只作用在了下拉按钮上，选项列表没跟上。

解决方案 #

我们可以改用自定义CSS类来明确设置<select>和<option>的样式，确保在Firefox中也能生效：

1. 先调整HTML，把内联样式替换成自定义类：

<div class="container-fluid">
  <select class="custom-select custom-themed-select">
    <option>option 1</option>
    <option>option 2</option>
  </select>
</div>

2. 添加对应的CSS样式，专门给<option>指定样式：

/* 设置下拉按钮的样式 */
.custom-themed-select {
  color: #f50;
  background-color: #410;
}

/* 针对Firefox单独设置下拉选项的样式 */
.custom-themed-select option {
  color: #f50;
  background-color: #410;
}

额外提示 #

如果还是不生效，可以试试提高选择器的优先级（比如加上父容器的选择器：.container-fluid .custom-themed-select option），或者万不得已时用!important（尽量避免，会增加样式维护成本）：

.custom-themed-select option {
  color: #f50 !important;
  background-color: #410 !important;
}

另外，Firefox 59是比较老旧的版本了，如果项目允许的话，建议提醒用户升级到最新版Firefox，能减少很多这类兼容问题。

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