如何使下拉选项与选择元素具有相同的样式？

Question

我正在使用Bulma来设置页面样式。由于某些原因，下拉列表中的选项与select元素本身的样式不匹配，请参见以下屏幕截图：

我使用Firefox在ubuntu 18.04上的本地主机上运行站点。该网站使用角度，这是选择菜单的代码。

    <div class="select is-success is-fullwidth selectOverflowStopped">
      <select [(ngModel)] = "leasing" (change)="setLeasingPrice()">
        <option [ngValue]="0.0014" >12 Monate ( 0.14%) </option>
        <option [ngValue]="0.0011">24 Monate ( 0.11%) </option>
        <option [ngValue]="0.001">48 Monate ( 0.1%) </option>
      </select>
    </div>

我已经阅读了关于SO的其他几篇文章，但是这些文章都没有涉及按DEFAULT选项元素呈现与select元素不同的问题。

Answer 1

I have overriden是我的默认行为，因为在Firefox上（无论如何在Linux上，对于其他操作系统我都不知道），它采用Gtk主题的样式。

因此在您的样式中添加类似内容应该可以解决问题：

select option {
  color: white !important;
}

select option, select optgroup {
  background-color: #363636 !important;
}

::placeholder {
  color: #aaa !important;
}