Question

我是一名前锋noob学习bootstrap。我想用自定义bg和字体颜色创建多个选项列表，我正在使用"custom-select"：

<div class="container-fluid">
    <select class="custom-select" style="color: #f50; background-color: #410;">
            <option>option 1</option>
            <option>option 2</option>
    </select>
</div>

它适用于铬，按钮和选项列表都有指定的颜色。但是在firefox（ubuntu上的59.0.2）只有按钮改变颜色，下拉选项列表是白色。如何在所有浏览器中使用它？

Answer 1

Bootstrap的custom-select组件不像某些JS解决方案（<select>，select2那样完成 Chosen替换，等等）。因此，它仍然受到浏览器对可以和不可以设置样式的限制。

您的上述示例的功能与您在Mozilla Firefox（桌面）版本59.0.2中所暗示的完全相同。 <select>容器和<option>值都应用您已声明的内联样式。

在macOS Safari和Google Chrome中，由于这些浏览器允许<select>设置样式，您会看到一些不同的结果。您无法设置下拉部分的样式，因此当这些浏览器在<select>容器上显示您想要的颜色时，您的下拉列表将显示在默认样式中。

当然，有一些例外。谷歌浏览器允许您调整下拉列表的font-weight。某些-webkit-*语法可用于具有不同结果的浏览器特定调整（当然，使用WebKit的浏览器专用）。

样式引导程序自定义选择下拉列表

1 个答案: