Change CSS to Mat-Form-Field with Search Box inside it

Issue

I am using Angular and Angular Material along with SCSS

In the front-end, I am using the code below...

<mat-form-field  class="custom-form-field" style="padding-top: 5px;padding-bottom: 0px; line-height: 0px;">
    <input style="padding-top: 0px; padding-bottom: 0px;" matInput type="text" id="onSearch" (keyup)="keyUp($event)">
    <mat-icon matPrefix class="centered-icon">search</mat-icon>
</mat-form-field>

With this code, it appears black bold outline for the textbox when I hover over the Search box and blue bold outline when I click inside the search box as below..

Tried applying the CSS as below..

.mat-form-field input:focus {
  outline: none;
  box-shadow: none;
}

But it is not working...

How to make this appear like a normal textbox like below..

Solution

The below CSS seems to do the job, we can use border-color, color and caret-color to set the border to always be black!

I was not getting the border for the mat form field, so I added appearance="outline" to get the outside border!

<mat-form-field
  appearance="outline"
  class="custom-form-field"
  style="padding-top: 5px;padding-bottom: 0px; line-height: 0px;"
>
  <input
    style="padding-top: 0px; padding-bottom: 0px;"
    matInput
    type="text"
    id="onSearch"
  />
  <mat-icon matPrefix class="centered-icon">search</mat-icon>
</mat-form-field>

styles.css

.custom-form-field .mat-form-field-outline-thick,
.custom-form-field
  .mat-form-field-appearance-outline.mat-focused
  .mat-form-field-outline-thick {
  border-color: black !important;
  color: black !important;
  opacity: 1 !important;
}
.custom-form-field .mat-input-element {
  caret-color: black !important;
}

stackblitz -> cd test -> npm i -> npm run start

Answered By - Naren Murali