我正在尝试自定义角度材质mat-form-field:我能够使用以下方法自定义下划线边框:
::ng-deep.mat-form-field-ripple {
background-color: yellow;
}
现在我尝试将禁用状态下的下划线边框自定义为实线而不是虚线:
我试过这个,但它不适用于下划线:
::ng-deep.mat-form-field-disabled
{
}
我希望这在禁用状态下是灰色的
<mat-form-field>
<input matInput placeholder="Input" [disabled]='true'>
</mat-form-field>
这固定了它:
::ng-deep.mat-form-field-disabled .mat-form-field-underline
{
background-image: linear-gradient( to right, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.42) 33%, #c2c7cc 0 ) !important;
background-size: 1px 100% !important;
background-repeat: repeat-x !important;
}
您需要定位以下类: -
.mat-form-field-disabled .mat-form-field-underline
您希望改变的CSS是: -
background-image: linear-gradient(to right,rgba(0,0,0,1) 0,rgba(0,0,0,.42) 33%,transparent 0);
background-size: 4px 100%;
background-repeat: repeat-x;
所以你可以unset: all
从新鲜开始或更新background-size: 1px 100%;
或任何适合您的需求
这解决了它:
::ng-deep.mat-form-field-disabled .mat-form-field-underline {
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 1) 0,
rgba(0, 0, 0, 0.42) 33%,
#c2c7cc 0
) !important;
background-size: 1px 100% !important;
background-repeat: repeat-x !important;
}