md-选择下划线颜色变化答案

【问题标题】：Md-select underline color changemd-选择下划线颜色变化
【发布时间】：2018-08-13 04:43:34
【问题描述】：

我尝试使用以下 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>

【问题讨论】：

标签： html angular-material md-select

【解决方案1】：

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

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

【讨论】：

感谢您的回答，但将此类：.mat-form-field-underline { background-color: #ff2e6d; } 应用于<md-input-container> 只会更改它的背景颜色，而不是我在原帖中圈出的那一行。

【解决方案2】：

在this问题中回答。

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

【讨论】：