Styling angular material input

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 stackblitz https://stackblitz.com/edit/angular-material-custom-input-j3k2h

PierreD · Accepted Answer · 2020-01-02 09:33:50Z

3

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

edited Jan 2, 2020 at 9:33

answered Jan 2, 2020 at 9:17

PierreD

9832 gold badges14 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

eddyuk Over a year ago

Thanks, the border color works, but the height still remains the same

eddyuk Over a year ago

That is working. Placing the input up to top border, but that is manageable. Thanks

Collectives™ on Stack Overflow

Styling angular material input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related