如何更改 Materializecss 选择下拉列表中的文本颜色？答案

【问题标题】：How to change the text color in a Materializecss select dropdown?如何更改 Materializecss 选择下拉列表中的文本颜色？
【发布时间】：2016-12-24 01:48:25
【问题描述】：

我有一个这样的 Materializecss 下拉选择：

      <form class="col s12">
        <select id="something" [ngModel]="_model.selectedPartyType"
            (ngModelChange)="onSelectChange($event)" name="partyTypeSelection"
            materialize="material_select" class="input-field col s12 m12 l4"
            >
           <optgroup *ngFor="let data of _model.codeTable.codeTokensG" [label]="data[0]">
             <option *ngFor="let cValue of data[1]" [value]="cValue">
               {{_model.codeTable.getCode(cValue).description}}
        </   option>
           </optgroup>
       </select>
      </form>

如何更改选项文本的默认青色？我已经尝试添加

.dropdown-content li>span {
  color: #000 !important;
}

.dropdown-content li>a {
  color: #000 !important;
}

.select-content li>span {
  color: #000 !important;
}

.select-content li>a {
  color: #000 !important;
}

到我的 css 文件，但这个和变体没有运气。如果我在 Chrome 开发人员工具中取消选择

的颜色属性

.dropdown-content li>span

如我所愿。

如何更改颜色？

【问题讨论】：

标签： css material-design materialize

【解决方案1】：

适用于具体化 css 版本 1.0.0

ul.dropdown-content li a {
    color: #000; /* no need for !important :) */
}

【讨论】：

【解决方案2】：

这将改变 select 标签：

.select-dropdown{
    color: #000;
}

这将改变 option 标签：

ul.dropdown-content.select-dropdown li span {
    color: #000; 
}

【讨论】：

【解决方案3】：

Jquery 单行解决方案

 $(".dropdown-content>li>a").css("color", themeColor);

您可以将颜色动态更改为您选择的任何颜色

现场演示

请参阅 CodePen 上 Hitesh Sahu (@hiteshsahu) 的 Pen Materialize CSS Change Theme Color。

【讨论】：

这根本不使用select表单元素。

【解决方案4】：

这对我有用

/* Dropdown list color */

.dropdown-content li > a, .dropdown-content li > span {
    color: #fb8c00 !important;
}

【讨论】：

【解决方案5】：

我今天也遇到了同样的问题。以下是我的解决方法：

ul.dropdown-content.select-dropdown li span {
    color: #000; /* no need for !important :) */
}

【讨论】：

由于某种原因这对我不起作用，文本的颜色保持为默认蓝色..
为了确保禁用不受影响，我使用了：ul.dropdown-content.select-dropdown li:not(.disabled) span { color: #1976d2; }

【解决方案6】：

无法运行您的代码，但我从该站点复制粘贴了下拉代码并将blue-text 类应用于它。

HTML：

  <ul id='dropdown1' class='dropdown-content'>
    <li> <a href="#!" class = "blue-text">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
  </ul>

您是否尝试将文本类应用于您的选项元素？

【讨论】：

weird..这个答案对我有用，你接受的答案不是：/但我仍然没有兴趣为我拥有的每个 href 添加一个类。有什么想法吗？
@wadie 我建议您在 chrome 的开发人员控制台中查看下拉元素的层次结构。如果您不想为每个 href 元素添加类，最赞成的一个答案是要走的路，只需检查层次结构和类名。
@LarsNielsen 这应该可以。只要确保它是“蓝色文本”而不是“蓝色文本”。我经常把它弄混。