如何更改 Materializecss select 下拉列表中的文本颜色?

How to change the text color in a Materializecss select dropdown?

我有一个像这样的 Materializecss 下拉列表 select:

      <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 Developer Tools 中为

deselect color 属性
.dropdown-content li>span

如我所愿

如何更改颜色?

无法 运行 您的代码,但我从网站复制粘贴了下拉代码并对其应用了 blue-text class。

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>

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

我今天遇到了同样的问题。这是我解决它的方法:

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

这对我有用

/* Dropdown list color */

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

Jquery单行解决方案

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

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

现场演示

见笔 Materialize CSS Change Theme Color by Hitesh Sahu (@hiteshsahu) on CodePen.

这将更改 select 标签:

.select-dropdown{
    color: #000;
}

这将更改 选项 标签:

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

正在实现 css 版本 1.0.0

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