CODEWITHSUNDEEP
cssangularangular-material
CptDayDreamer
CptDayDreamer

Reputation: 1794

How to set outlined mat-form-field background color?

I want to change the background color of my searchbar. It has the appearance="outline" and I like the design, but if I set a new color it goes over the borders and looks ugly. What can I do here?

My CSS:

::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
  padding: 5%;
}

::ng-deep .mat-form-field-infix {
  top: -3px;
}

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  background-color: white;
}

My HTML:

<mat-form-field style="width:110%;" appearance="outline" >
    <mat-icon matPrefix>search</mat-icon>
    <input type="search" name="test" [(ngModel)]="searchText"
    placeholder="Search" aria-label="Search" matInput>
</mat-form-field>

Enter image description here

Upvotes: 28

Views: 43790

Answers (4)

Vega
Vega

Reputation: 28708

Angular 15+ classes changed. If you have rounded borders on an outlined form field, setting background color is kind of challenging.

HTML:

<mat-form-field floatLabel="always" appearance="outline" class="white-backgrounded-field">

CSS: (preferably the global stylesheet)

.white-backgrounded-field .mdc-text-field--outlined .mdc-notched-outline {
  z-index: 0
}

.white-backgrounded-field .mdc-notched-outline__notch,
.white-backgrounded-field .mdc-notched-outline__leading,
.white-backgrounded-field .mdc-notched-outline__trailing {
  background-color: white;
}

Upvotes: 2

ttugates
ttugates

Reputation: 6291

This is hideous code but sets the background-color such that the its in the rounded portion only. As opposed to seeing tiny corners of background outside the outline.

:host ::ng-deep mat-form-field .mat-form-field-outline-start {
  background-color: white !important;
}

:host ::ng-deep mat-form-field .mat-form-field-outline-gap {
  background-color: white !important;
}

:host ::ng-deep mat-form-field .mat-form-field-outline-end {
  background-color: white !important;
}

Upvotes: 3

Hassan Siddiqui
Hassan Siddiqui

Reputation: 2845

Just change your background-color to color and !important for override the Material CSS. Try this:

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

Upvotes: -3

Johar Zaman
Johar Zaman

Reputation: 2103

You can add border-radius to the div where you are changing the background.

I have tested border-radius: 5px and it looks good.

Code for you

I am assuming this background CSS is working for you. I just tried this with your selector.

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  background-color: white;
  border-radius: 5px;
}

Screenshot: http://prntscr.com/nanu75

Upvotes: 42

Related Questions