Search code examples
cssangularangular-material

Change CSS of Mat-Form-Field to appear like a normal textbox in Angular HTML

I am following this Question CSS Question

And I want to change that black or blue color to appear like a normal textbox like this..

Search Bar

The HTML code is as 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>

I am using this code right now to remove thick black or thick blue border of the textbox.

.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;
}

EDIT

How to reduce the size of the box a little bit by 20% and align the Search Icon vertically to the middle of the textbox?

Search Box Middle

Solution

  • You can use the below CSS, you can remove the icon if needed. I kept it since I was not sure if it was required or not!

    .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;
}

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