CODEWITHSUNDEEP
javascriptcssangularangular-materialmaterial-design
Joshua Michael Calafell
Joshua Michael Calafell

Reputation: 3107

How do I use a darker background and keep the Angular Material Form Field components have a white background?

I have a page where I would like to use this Angular Form Field:

<mat-form-field appearance="outline">
    <mat-label>Outline form field</mat-label>
    <input matInput placeholder="Placeholder">
    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    <mat-hint>Hint</mat-hint>
</mat-form-field>

Now, notice that the appearance="outline" in the mat-form-field is new since which version, I don't know, but it is new.

So, this creates these nice white forms with borders, but we want to use a darker background on the form, so that users focus on the white inputs (For UX).

What happens when we place these form fields into divs, we can set the divs to a background of say #fbfbfb but the form fields take on the same color, so basically they are transparent. We have tried to find a particular class or element that we can set either the background-color or the color to white, but with no luck.

How can I achieve white inputs on top of a slightly darker background?

Upvotes: 0

Views: 2730

Answers (2)

Yudgine
Yudgine

Reputation: 29

just add to css this code if you want dark backgroud under mat-form-field:

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

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

::ng-deep mat-form-field .mat-form-field-underline {
  background-color: #868686!important;
}

::ng-deep mat-form-field .mat-input-element {
  caret-color: #157cfc!important;
}

::ng-deep mat-form-field .mat-form-field-ripple {
  background-color: #157cfc!important;
}

Upvotes: 0

G. Tranter
G. Tranter

Reputation: 17958

The class you need to add background color to is named mat-form-field-outline. You will also need to add a 5px border radius so that it matches the field outline. Something like:

<mat-form-field class="opaque-form-field">...

.opaque-form-field {
  /deep/ .mat-form-field-outline {
    background-color: #fff;
    border-radius: 5px;
  }
}

Upvotes: 0

Related Questions