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

Question

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

我在 localhost 上使用 ubuntu 18.04 运行该站点，使用 firefox。该网站使用角度，这里是选择菜单的代码。

    <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 的帖子，但没有一个必须处理选项元素 BY DEFAULT 呈现与选择元素不同的问题。

标签： cssbulma

Answer 1

我已经覆盖了我的默认行为，因为在 Firefox 上（无论如何在 Linux 上，对于我不知道的其他操作系统）它采用 Gtk 主题的样式。

所以在你的风格中添加类似的东西应该可以解决问题：

select option {
  color: white !important;
}

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

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