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

十年热恋 提交于 2021-02-07 18:38:05

问题


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


回答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




回答2:


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




回答3:


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


来源:https://stackoverflow.com/questions/59354992/problem-mat-form-field-outline-background-color-on-hover

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!