CODEWITHSUNDEEP
angularangular-material
Oleksandr Romanov
Oleksandr Romanov

Reputation: 81

Angular Material mat-select underline color change in Angular application

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

Upvotes: 6

Views: 9908

Answers (4)

Hansani Tharaka
Hansani Tharaka

Reputation: 11

I know I am late for the answer, but someone hopefully find it helpful. After hours of surfing through the browser inspect, I finally managed to find the answer.

  • normal underline (no appearance variant)
::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline {
  background-color: red;
}

::ng-deep .mat-form-field-appearance-fill .mat-form-field-underline {
  background-color: red;
}
  • underline when focused
::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple {
  background-color: blue;
}

Be sure to use ::ng-deep for angular to be able to overwrite these styles.

Upvotes: 0

Manuel Ridao
Manuel Ridao

Reputation: 3

here is what worked for me

// this is the underline when hovered
::ng-deep .mat-form-field-ripple {
  background-color: red !important;
}
// this is the normal
::ng-deep .mat-form-field-underline {
  background-color: red !important;
}

it does not work without ::ng-deep or !important, i think because angular overwrites this style somewhere down the line when generating html and css elements

Upvotes: 0

YouBee
YouBee

Reputation: 2061

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;

Upvotes: 0

AlanObject
AlanObject

Reputation: 9943

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 {
     ...
 }

Upvotes: -1

Related Questions