CODEWITHSUNDEEP
cssangularangular-material
Ashitha Rajesh
Ashitha Rajesh

Reputation: 13

In angular 10 how to reduce mat form field appearance outline border size

In angular 10, using @angular/material, how can I reduce the mat-form-field appearance of the outline border on hover state.

I am able to modify the default border size using this code:

:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  color: black;
}

On hover a thick black color is showing like this

enter image description here

I need to show it like this on hover

enter image description here

Upvotes: 1

Views: 1849

Answers (1)

j3ff
j3ff

Reputation: 6099

If you inspect the input element in the browser, you'll notice that the hover state affects 3 inner elements inside .mat-form-field-outline. Therefore, to force all those elements to get a black border with a 1px width even on hover state, you could do this:

.mat-form-field ::ng-deep .mat-form-field-outline-start,
.mat-form-field ::ng-deep .mat-form-field-outline-gap,
.mat-form-field ::ng-deep .mat-form-field-outline-end {
  color: black;
  border-width: 1px !important;
}

⚡ Here is a working example: https://stackblitz.com/edit/angular-stackoverflow-66985351

Upvotes: 1

Related Questions