问题 mat-form-field outline background-color on hover

Question

当我将鼠标移到 mat-form-field 上时出现 CSS 问题。

为了能够使用彩色垫卡，我在 style.scss 中添加了一些 CSS class 来更改 mat-form-field 的 background-color .

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

它工作正常，但是当我将鼠标悬停在 mat-form-field 上时，背景在几分之一秒内变红。不幸的是，我找不到 CSS class 允许我删除这种透明度。

StackBlitz: here

Answer 1

问题是由这个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);
}

悬停时，它会将不透明度转换为 0，从而产生您显示的效果。您可以通过覆盖悬停时的过渡来解决此问题。

为了将来参考，您可以使用浏览器中的开发检查器找到它：

我在元素上调用了悬停效果并检查了添加的样式

Answer 2

少一点代码，我认为 ViewEncapsulation.None 很重要：

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

Answer 3

你可以通过这个改变悬停的颜色。在这里你可以给任何你想要的颜色。
只需在您的代码中添加此 css。

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

问题 mat-form-field outline background-color on hover

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

css

angular

angular-material

angular-material2

mat-form-field