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

Issue

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>

Solution

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

Answered By - Johar Zaman