CODEWITHSUNDEEP
cssangularangular-materialangular-material2mat-form-field
Quentin
Quentin

Reputation: 1933

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

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

enter image description here

Upvotes: 7

Views: 14478

Answers (3)

Muhammad Bilal
Muhammad Bilal

Reputation: 21

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

Upvotes: 2

Prashant Pimpale
Prashant Pimpale

Reputation: 10697

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

Upvotes: 1

C.OG
C.OG

Reputation: 6529

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:

enter image description here

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

Upvotes: 8

Related Questions