Md-select underline color change

Question

I have tried changing the color of md-select underline with the following css:

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

but it doesn't work.

Here is the html which contains the md-select which I want to customize:

<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

The underline you are trying to change is part of the form field component (mat-input-container), not the select component. According to Material Design, the color of the underline comes from the theme. By default, it uses the theme's standard divider color, and when focused it will use the theme's primary color. You can change the focused color to the theme's accent color with <mat-input-container color="accent"> . You can change the primary and accent colors, and even the divider color by implementing a custom theme .

You should not change the color outside of the theme, but should you want to violate the material design guidelines anyway, use the background-color property on the mat-form-field-underline class for the default color, and on the mat-form-field-ripple class for the focused color.

Answer 2

Answer in this question.

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