Question 318305 in Html Question posted in
Some basic documentation can be found here.

Html – Changing the ripple color of a mat-input

I’ve been struggling for a while now on how to manually change the ripple color of a <mat-input> element and I can’t seem to get it to work in any way.

<input matInput
       type="number"
       (keydown)="updateManualPage(1)"
       placeholder="Filter"
       formControlName="filterParam1">

I’ve tried everything I could think of in the CSS, .mat-form-field-underline, .mat-form-field-ripple, including a giant block of classes I’ve shamelessly ripped out of another SO question/answer, using ::after and ::before selectors, trying to use ::ng-deep, !important but nothing seems to change the color of the ripple from the blue one that is imported from @import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

EDIT: Just read the API a bit better, so I found out that the border color that appears after the ripple is from the <mat-form-field> element, which has a color picker. However, that color picker can only have a value of ‘primary’, ‘accent’, and ‘warn’. So now I’m wondering how it would be possible to insert a custom color.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Managed to figure it out, it was

    ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
  border-bottom-color: *X* !important;
}

  2. 0

    Here is a alternative without using ::ng-deep since it causes warnings during build.

    css

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

.mat-form-field.mat-focused .mat-form-field-label {
  color: red !important;
}

    or

    .custom-ripple .mat-form-field.mat-focused .mat-form-field-label {
  color: red !important;
}

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

    html

    <div class="custom-ripple">
  <mat-form-field appearance="fill">
    <mat-label>Outline form field</mat-label>
    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    <input matInput placeholder="Favorite food" value="Sushi" />
  </mat-form-field>
</div>
<app-form-field></app-form-field>

    stackblitz

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search