I have designed a search bar using mat-form-field and attempted to personalize the appearance. Currently, there is a gray border-like region surrounding the input field and icons. Moreover, clicking on the input field results in a visible border:
<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;
}
Is there a way to eliminate this gray area (or make it white) and get rid of the border around the input field?
I have experimented with various solutions recommended on this platform but none proved successful.
Your assistance would be greatly appreciated!