Md-选择下划线颜色变化

Question

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

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）的一部分，而不是select组件。根据Material Design，下划线的颜色来自主题。默认情况下，它使用主题的标准分隔颜色，当聚焦时，它将使用主题的主要颜色。您可以使用<mat-input-container color="accent">将焦点颜色更改为主题的强调色。您可以通过实现custom theme来更改主色和强调色，甚至是分隔色。

您不应该更改主题之外的颜色，但是如果您想要违反材料设计指南，请使用background-color类的mat-form-field-underline属性作为默认颜色，并且mat-form-field-ripple类用于聚焦颜色。

Answer 2

回答this问题。

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