CODEWITHSUNDEEP
htmlcssinputangular8mat-form-field
Usr
Usr

Reputation: 2838

Delete border of mat-form-field with input (also for hover and focus)

I'm having a hard time styling my mat-form-field.
What I want is to delete the border from the field, also when the field is focused and the user is on hover. Right now I have this:

enter image description here

and I need to delete that border outside of my input. This is my form field:

<mat-form-field class="search-field" appearance="outline">
  <mat-label>Search</mat-label>
  <input matInput type="text" >
  <mat-icon matSuffix>search</mat-icon>
</mat-form-field>

and in .scss:

mat-form-field.search-field {
    .mat-form-field-flex {
        background-color: white;
        border-radius: 2rem;
        color: transparent;

        .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
            border-style: none;
        }

    }
}

The "first" style is correctly applied, but not the style for the border.
Also I'm not totally sure this is the best way to stile it, but in the docs there is no indication on how to change all these parts.

Upvotes: 0

Views: 2649

Answers (1)

Filip Filipovic
Filip Filipovic

Reputation: 151

Many of the Material styles are enforced with the !important flag. You can either try to overwrite them using !important in your code, which I wouldn't recommend, since it may not even work. You could try using ::ng-deep, tho. Material elements are not really str8 forward for modification, so either way, you'll have to 'hack' into it. Good luck :)

Upvotes: 1

Related Questions