Angular Material mat-select underline color change in Angular application

5
votes

I'm new to Angular Material, so I may be missing something, but I would appreciate any help on this case. My goal is to change the default blue underline of mat-select tag to white color while it is on focus. I managed to deal with this by adding this code to global styles file of my project:

.mat-select-value, .mat-select-arrow{
    color: #fff !important;
}

.mat-form-field-infix{
    border-bottom: 2px solid lightgrey !important;
}

.mat-focused .mat-form-field-underline .mat-form-field-ripple{
     background: none; 
}

You can see how it looks here (language selection dropdown list in top left corner).

After that I realized, that i will need some more mat-select tags in another components, but the underline this time should not be white, but black. Thats why I need my problem to be solved by changing component styles, but still nothing works for me. So far I tried to use !important to reset Angular Material attributes, ng-deep and switching encapsulation mode to "None".

I also inspected this issue with similar problem, but it seem a bit outdated and after my rework still didn't work for me.

This is the html template, that i'm using

<div id="languageDropDown">
    <mat-form-field id="languageSelector">
      <mat-select [(ngModel)]="language" name="languageSelector" id="languageSelector" (selectionChange)="languageChanged()">
        <mat-option value="en" selected="selected" >EN</mat-option>
        <mat-option value="ua">UA</mat-option>
      </mat-select>
    </mat-form-field>
  </div>

I am using: @angular/[email protected], Angular: 6.0.6

2
angularangular-material

2 Answers

0
votes

Add this to your style.css

when focused

.mat-form-field.mat-focused .mat-form-field-ripple{
    background-color: red;
}

when Normal

.mat-form-field-appearance-legacy .mat-form-field-underline {
    background-color: blue;
-1
votes

Instead of modifying the original mat-* classes why not add your own classes and invoke the proper one at the HTML level?

So: 

    <mat-form-field class="blackunderline" id="languageSelector"> .. </mat-form-field>

Or:

    <mat-form-field class="whiteunderline" id="languageSelector"> .. </mat-form-field>

And in your component's CSS (or global CSS if you prefer):

.blackunderline {
     ...
 }

.whiteunderline {
     ...
 }