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">將焦點顏色更改為主題的重點顏色。 您可以通過實現自定義主題來更改原色和強調色，甚至分隔色。

您不應該在主題之外更改顏色，但是無論如何都要違反材質設計准則，請在mat-form-field-underline類上使用background-color屬性作為默認顏色，並在mat-form-field-ripple類，用於突出顯示顏色。

Answer 2

回答這個問題。

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