如何更改 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 :) */
}
我有一个像这样的 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 :) */
}