Change the highlighted color of angular material input text box

Question

Hi I am using angular material, I like to change the material input focus color on click

Right now by default it is showing in purple color, I like to change white color

I tried with lot of css. But nothing is working for me

Below is the example of stackblitz URL

https://stackblitz.com/edit/material-input-sample?file=src/app/app.component.ts

Do you want to change theme or single input? – Bojan Kogoj Jul 02 '21 at 10:06 — Bojan Kogoj, Jul 02 '21 at 10:06

score 2 · Accepted Answer · answered Jul 02 '21 at 10:17

2

You can modify the css of the mat-input elements by using ::ng-deep.

::ng-deep {
  .mat-form-field-label {
    color: white !important;
  }

  .mat-form-field.mat-focused .mat-form-field-ripple {
    background-color: white !important;
  }
}

Example in stackblitz

answered Jul 02 '21 at 10:17

Drashti Dobariya

2,455
2
10
23

Please note ::ng-deep is depracated – theNoble247 Oct 05 '22 at 10:36

Change the highlighted color of angular material input text box

1 Answers1