Angular Material how to override .mat-form-field-hide-placeholder behavior with css

1
votes

With Angular Material, I'm having trouble to css override the .mat-form-field-hide-placeholder class that is automatically added to the parent mat-form-field tag when the input is out of focus. The goal is to always show the placeholder.

The code looks something like this:

<mat-form-field>
  <mat-label>
      Field label
  </mat-label>
  <input type="text" placeholder="placeholder text">
</mat-form-field>
2
angularangular-material

2 Answers

1
votes

Finally, I got it working doing this:

Using SASS:

.mat-form-field.mat-form-field-hide-placeholder {
  .mat-form-field-infix {
    .mat-input-element::placeholder {
      color: $gray-350 !important;
      -webkit-text-fill-color: $gray-350 !important;
    }
  }
}

Or plain CSS:

.mat-form-field.mat-form-field-hide-placeholder .mat-form-field-infix  .mat-input-element::placeholder {
      color: $gray-350 !important;
      -webkit-text-fill-color: $gray-350 !important;
}
0
votes

You can use /deep/ selector to properly override the class. This is a known problem in angular material.

/deep/ .mat-form-field-hide-placeholder {
    // your code here
}

It's important to know that /deep/ selector is currently being deprecated, but as far as I know currently doesn't have any alternative solution to this problem. So pay attention to future changes.