Overriding Mat-Form-Field default Styling

Question

I have created a search bar using mat-form-field and tried to customize the styling. Right now there is a border-like gray area around the input and icons. Also when I click on the input, a border around the input appears:

<form #formRef="ngForm" class="form-inline" (ngSubmit)="searchTicker(searchInput.value)" #form="ngForm" [formGroup]="formGroup" style="display:flex; justify-content: center; ">
    <mat-form-field style="width: 400px;" class="search-bar">
        <div style="display: flex;align-items: center;" class="search-bar-container" >
            <input #searchInput class="form-control" placeholder="Enter Stock Ticker Symbol" 
            matInput [matAutocomplete]="auto" formControlName = "tickerValue" value="selectedTicker" style="background-color: white;" >
            <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let item of ACArray" [value]="item.symbol" (click)="selectOption(item.symbol)"> {{item.symbol}} | {{item.description}} </mat-option>
            </mat-autocomplete>
            <button mat-icon-button type="submit"> 
                <mat-icon>search</mat-icon>
            </button>
            
            <button mat-icon-button (click)="searchInput.value = '' ; clearResults()"> 
                <mat-icon>close</mat-icon>
            </button>
        </div>
    </mat-form-field>
</form>

.search-bar-container{
    background: white;
}

How can I remove this gray area (or make it white) and remove the border around the input?

I tried many suggested methods on this forum but they did not work.

I'd appreciate any help!

Answer 1

Add this CSS to your global styles.scss or component-specific CSS file:

/* Remove gray border and background */
.mat-form-field {
  border: none;
  background-color: transparent;
}

/* Remove outline on focus */
.mat-form-field.mat-focused .mat-form-field-underline {
  display: none;
}

/* Remove border and background on input element */
.mat-form-field-wrapper {
  background-color: transparent;
  border-radius: 0; /* if needed */
}

Hope it helps