Question

我有一个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

按我的意愿行事。

如何更改颜色？

Answer 1

我今天遇到了同样的问题。以下是我如何解决它：

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

Answer 2

这对我有用

/* Dropdown list color */

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

Answer 3

我无法运行您的代码，但我复制粘贴了网站的下拉代码并将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>

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

Answer 4

Jquery单行解决方案

(function($) {
  var jumpSize = 20, //increased this for the fiddle, so we don't have to click as often
      barWidth = 0,
      $bar,
      $showOnComplete;

  $(function() {
    $bar = $("#bar").children("div");
    $showOnComplete = $("#showOnComplete");

    $(document).on("click", "#button", function() {
      barWidth += jumpSize;
      $bar.width(barWidth + "%");
      if (barWidth >= 100) $showOnComplete.show(); //optionally add a setTimeout of 500 here to account for the final transition of the bar
    });
  });
})(jQuery);

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

现场演示

在Materialize CSS Change Theme Color上查看Hitesh Sahu（@hiteshsahu）的笔CodePen。

Answer 5

适用于具体化的CSS版本1.0.0

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

Answer 6

这将更改 select 标签：

.select-dropdown{
    color: #000;
}

这将更改 option 标签：

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

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

6 个答案: