html - md-选择下划线颜色变化

Question

我尝试md-select使用以下 css 更改下划线的颜色：

md-input-container > md-select  {
    border-color: rgba(13, 148, 74, 0.82);
}

但它不起作用。

这是包含我要自定义的 md-select 的 html：

<md-input-container>
    <label>Items</label>
    <md-select ng-model="selectedItem" md-selected-text="getSelectedText()" ng-required="true">
       <md-optgroup label="items">
          <md-option ng-value="item" ng-repeat="item in items">{{item}}</md-option>
       </md-optgroup>
    </md-select>
</md-input-container>

Answer 1

您尝试更改的下划线是表单字段组件（mat-input-container）的一部分，而不是选择组件。根据 Material Design，下划线的颜色来自于主题。默认情况下，它使用主题的标准分隔线颜色，当聚焦时，它将使用主题的原色。您可以使用 将焦点颜色更改为主题的强调色<mat-input-container color="accent">。您可以通过实现自定义主题来更改主色和强调色，甚至是分隔线颜色。

你不应该改变主题之外的颜色，但是如果你想违反材料设计准则，使用类background-color上的属性mat-form-field-underline作为默认颜色，使用mat-form-field-ripple类上的属性作为焦点颜色。

Answer 2

在这个问题中回答。

md-select:not([disabled]):focus .md-select-value{
    border-bottom-color: #000;
}