造型角材料输入

Question

I created an outline textbox:

<mat-form-field appearance="outline">
    <input matInput placeholder="Username">
  </mat-form-field>

I am trying to control the height, the border color using:

.mat-form-field {
  height:20px;
  border:1px solid #f0f;
}

But the result is far from the desired. Is there a way it can be done? Sample code I created on stackblitzhttps://stackblitz.com/edit/angular-material-custom-input-j3k2h

Answer 1

You can add this style to edit height:

.mat-form-field-infix {padding:0 !important; border:0 !important;}
.mat-form-field-flex{ margin:0 !important; padding:5px !important; padding-bottom: 17px !important; height: 20px !important;}
.mat-form-field-wrapper { padding: 0 !important; }

And this one to edit the border-color:

.mat-form-field-appearance-outline .mat-form-field-outline {
  color: #f0f;
}