CODEWITHSUNDEEP
htmlangular-materialmd-select
Vid
Vid

Reputation: 173

Md-select underline color change

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

Upvotes: 0

Views: 1948

Answers (2)

Montells
Montells

Reputation: 6679

Answer in this question.

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

Upvotes: 0

G. Tranter
G. Tranter

Reputation: 17958

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.

Upvotes: 0

Related Questions