有没有办法改变 Materializecss Select 中文本和箭头的颜色？

【问题标题】：Is there a way to change the color of the text and arrow in a Materializecss Select?有没有办法改变 Materializecss Select 中文本和箭头的颜色？
【发布时间】：2020-07-09 20:53:26
【问题描述】：

只是想把文字和箭头放在白色：

代码如下：

<div class="input-field col s12 white-text">
  <select class="white-text" id="selectSide">
    <option value="All" selected>All</option>
    <option value="Buy">Buy</option>
    <option value="Sell">Sell</option>
  </select>
  <label class="white-text">Side</label>
</div>

【问题讨论】：

我相信箭头是一个 SVG 元素，不是吗？

标签： html css material-design materialize

【解决方案1】：

实际应用于输入、下拉和图标的样式如下：

对于图标：

.select-wrapper .caret {

    fill: firebrick;
}

对于下拉内容：

.dropdown-content li span {  
    color: firebrick;   
}

对于所选项目的颜色：

.dropdown-content li span {  
    color: firebrick;   
}

显然将耐火砖更改为您想要的颜色。旁注，Materializecss 隐藏了原始的选择元素并创建了一个带有内置下拉列表的新元素 - 因此上面的样式（.dropdown-content 和 .select-wrapper）是动态生成的，因此如果您正在寻找样式，则有点难以设置在原始标记处。

工作演示here。

【讨论】：