0

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>

enter image description here

Vid
  • 163
  • 1
  • 13

2 Answers2

0

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.

G. Tranter
  • 16,766
  • 1
  • 48
  • 68
  • Thank you for your answer, but applying this class: `.mat-form-field-underline { background-color: #ff2e6d; } ` to the `` just changes the background color of it, ot he line that i circled in the original post. – Vid Mar 06 '18 at 09:15
0

Answer in this question.

md-select:not([disabled]):focus .md-select-value{
    border-bottom-color: #000;
}
Montells
  • 6,389
  • 4
  • 48
  • 53