我正在尝试在mdc-select中更改下拉箭头的默认紫色:
无礼的mixins似乎都没有这样做。
怎么做?
到目前为止,这是我尝试过的:
的HTML
<div class="mdc-select mdc-select--outlined">
<input type="hidden" name="enhanced-select">
<i class="mdc-select__dropdown-icon"></i>
<div class="mdc-select__selected-text" class="mdc-select__selected-text" role="button" aria-haspopup="listbox" aria-labelledby="demo-label"></div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface">
<ul class="mdc-list">
<li class="mdc-list-item" data-value="41" role="option">41</li>
<li class="mdc-list-item" data-value="42" role="option">42</li>
<li class="mdc-list-item" data-value="43" role="option">43</li>
</ul>
</div>
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label class="mdc-floating-label">Answer to Life</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
SCSS
@import "@material/list/mdc-list";
@import "@material/menu-surface/mdc-menu-surface";
@import "@material/menu/mdc-menu";
@import "@material/select/mdc-select";
.mdc-select {
@include mdc-select-ink-color(red);
// @include mdc-select-container-fill-color(red);
@include mdc-select-label-color(red);
@include mdc-select-focused-label-color(red);
@include mdc-select-bottom-line-color(red);
@include mdc-select-focused-bottom-line-color(red);
@include mdc-select-hover-bottom-line-color(red);
@include mdc-select-outline-color(red);
@include mdc-select-focused-outline-color(red);
@include mdc-select-hover-outline-color(red);
@include mdc-select-icon-color(red);
}
TS
import { MDCSelect } from '@material/select';
const select = new MDCSelect(document.querySelector('.mdc-select'));
最佳答案
这不是图标或字体,该箭头是.mdc-select--focused .mdc-select__dropdown-icon
类的背景图像。您可以使用filter
css属性更改图像颜色。
filter: hue-rotate(60deg);
将此CSS应用于您自定义的类
.mdc-select--focused .mdc-select__dropdown-icon
的CSS,它将起作用。谢谢。
关于css - 如何更改MDC-Select下拉箭头的颜色?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57870600/