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

Question

我正在使用 Bulma 来设计我的页面。出于某种原因，下拉列表中的选项与选择元素本身的样式不匹配，请参见此屏幕截图:

我使用 firefox 在 ubuntu 18.04 的本地主机上运行该站点。该站点使用angular，这里是选择菜单的代码。

    <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>

我已经阅读了关于此主题的其他几篇文章，但没有一篇必须处理选项元素默认呈现与选择元素不同的问题。

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;
}