Problem mat-form-field outline background-color on hover

Question

I have a CSS problem when I pass my mouse over a mat-form-field.

To be able to use a colored mat-card, I added some CSS class in style.scss to change the background-color of the mat-form-field.

.mat-form-field-appearance-outline .mat-form-field-outline-start { background-color: white!important; }
.mat-form-field-appearance-outline .mat-form-field-outline-gap { background-color: white!important; }
.mat-form-field-appearance-outline .mat-form-field-outline-end { background-color: white!important; }
mat-form-field mat-label { background-color: rgba(255, 255, 255, 0.9); }

It works fine, but when I hover my mouse over a mat-form-field, the background turns red for a fraction of a second. Unfortunately I can't find the CSS class allowing me to remove this transparency.

StackBlitz: here

Negatron

Answer 1

The problem is caused by this css:

.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-flex:hover .mat-form-field-outline {
    opacity: 0;
    transition: opacity .6s cubic-bezier(.25,.8,.25,1);
}

On hover it transitions the opacity to 0, causing the effect you show. You could fix this by overriding the transition on the hover.

---

For future reference you can find thid by using the dev inspector in your browser:

I invoked the hover effect on the element and inspected the styles that were added

Castanets

I changed the opacity to 1 and it works. And for the hover, the class does not appear in my project, even in :hover, it's a mystery. thanks a lot for your answer. – Negatron

How to apply it in the class in html with that css format? Sorry I'm not a frontend guy... – Gastrovascular

Answer 2

you can change the color of hover by this. Here you can give any color you want.
just add this css in your code.

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
  color: rgba($grey, 0.75) !important;
}

Integer

Answer 3

With bit less code and I think ViewEncapsulation.None is the important:

CSS:

.mat-form-field-flex:hover .mat-form-field-outline {
   opacity: 0;
   transition: none !important;
}

TS:

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'form-field-appearance-example',
  templateUrl: 'form-field-appearance-example.html',
  styleUrls: ['form-field-appearance-example.css'],
  encapsulation: ViewEncapsulation.None
})

Demo

Prong