CODEWITHSUNDEEP
cssangularangular-material
noam steiner
noam steiner

Reputation: 4444

Is it possible to adjust mat-form-field-outline thickness?

I'm trying to style angular material's input to look the same as all inputs in this app.

Is it possible to adjust the thickness of the schedule's input outline to have the same width as the project's input border?

enter image description here

Upvotes: 4

Views: 7359

Answers (5)

Sean Segura
Sean Segura

Reputation: 1

For Angular 18+ I use the appropriate overrides mixin for customization of angular material components. For example, to make the border width 4 add this to your styles.scss file and override the outlined-outline-width and/or outlined-focus-outline-width varriables :

@use '@angular/material' as mat;

html,
body {
  @include mat.form-field-overrides((
    outlined-outline-width: 4px,
    outlined-focus-outline-width: 4px
  ));
}

I would avoid overriding classes because those classes are NOT part of an API and are subject to change so could break if you upgrade. There are a variety of variables that can be overridden. I look at this file and search on overrides to see the various mixins: node_modules@angular\material_index.scss

Then you can find the scss file for a form fields. For example the form-fields-override:

@forward './form-field/form-field-theme' as form-field-* show form-field-theme, form-field-color, form-field-typography, form-field-density, form-field-base, form-field-overrides;

Upvotes: 0

Ahmed Korany
Ahmed Korany

Reputation: 51

angular +15

after my search, I found a simple way without ng-deep or !important

we can change color or thickness (width) by this code I put it in body in style.scss

for normal : --mdc-outlined-text-field-outline

for hover : --mdc-outlined-text-field-hover-outline

for focus : --mdc-outlined-text-field-focus-outline

after that add -color or -width

body {
      --mdc-outlined-text-field-outline-color: #d0d5dd;
      --mdc-outlined-text-field-hover-outline-color: #d0d5dd;
      --mdc-outlined-text-field-hover-outline-width: 0.5px;
      --mdc-outlined-text-field-focus-outline-color: #d0d5dd;
      --mdc-outlined-text-field-focus-outline-width: 0.5px;
  }

simple for custom inputs outline

Upvotes: 2

John Gilmer
John Gilmer

Reputation: 909

This worked for me:

.mat-form-field-outline-start, .mat-form-field-outline-end, .mat-form-field-outline-gap {
  border-width: 2px !important;
}

Upvotes: 0

noam steiner
noam steiner

Reputation: 4444

The classes to override are:

.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-start,
.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-end,
.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-gap {
    border-width: 1px !important;
}

Make sure you use border-width and not border

Upvotes: 7

Alexander S.
Alexander S.

Reputation: 60

Have you tried editing the width of the schedule input itself?

If simply nothing changes maybe try to add the !important tag to css to overwrite the width given (and match the other input ones).

Upvotes: 0

Related Questions