Search code examples
cssangularangular-material

Search Bar Highlighting on focus of the Mat-Form-Field Input Box in Angular HTML

I am following this Question in Stackoverflow...

Textbox Highlighting

Expected Search Box

I would like to have the same highlighting for the Search Box which has this code..

<mat-form-field  class="custom-form-field" appearance="outline" 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>

And it's CSS code is as below..

.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: #ced4da !important;
    border-width: 0px !important;

    color: #ced4da !important;
    opacity: 1 !important;
}
.custom-form-field .mat-input-element {
    caret-color: #ced4da !important;
    color: #575e64;
}
.custom-form-field .mat-form-field-infix {
    border-top: 0px !important;
    padding: 0.9em 0 0.6em 0 !important;
}
.custom-form-field .mat-form-field-prefix {
    top: -1px !important;
    color: #575e64;
}
.custom-form-field .mat-form-field-outline-start,
.custom-form-field .mat-form-field-outline-end,
.custom-form-field .mat-form-field-outline-gap {
    border-width: 1px !important;
}

The highlighting in blue color happens without applying any styles to the input textbox. But, if I convert that input textbox to mat-form-field, the hightlighting goes away with the current code.

Atleast converting from Angular Material form field to textbox is also okay for me...

Solution

  • You can just use the CSS for outline for this requirement. we can use outline: #bfdeff solid 2px !important;

    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: #ced4da !important;
  border-width: 0px !important;

  color: #ced4da !important;
  opacity: 1 !important;
}
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
  outline: #bfdeff solid 2px !important;
  border-radius: 5px;
}
.custom-form-field .mat-input-element {
  caret-color: #ced4da !important;
  color: #575e64;
}
.custom-form-field .mat-form-field-infix {
  border-top: 0px !important;
  padding: 0.9em 0 0.6em 0 !important;
}
.custom-form-field .mat-form-field-prefix {
  top: -1px !important;
  color: #575e64;
}
.custom-form-field .mat-form-field-outline-start,
.custom-form-field .mat-form-field-outline-end,
.custom-form-field .mat-form-field-outline-gap {
  border-width: 1px !important;
}

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