我正在使用有角度的材料mat-form-field
。我有深色背景,因此尝试将表单字段的边框更改为白色。但我无法使用 css 来实现它。不,无论我在 css 中进行什么更改,它们都不会反映到mat-form-field
。这是我的代码的链接:
StackBlitz 链接到我的作品 https://stackblitz.com/edit/angular-nnzlr5
任何帮助将不胜感激。
谢谢。
我认为这将涵盖一切。
// mat-icon-stepper selected color change
::ng-deep .mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
background-color: red!important;
}
//input outline color
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
color: red!important;
// opacity: 1!important;
}
//mat-input focused color
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
color: red!important;
}
// mat-input error outline color
::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick{
color: red!important;
opacity: 0.8!important;
}
// mat-input carent color
::ng-deep .mat-input-element {
caret-color: red!important;
}
// mat-input error carent color
::ng-deep .mat-form-field-invalid .mat-input-element, .mat-warn .mat-input-element {
caret-color: red!important;
}
// mat-label normal state style
::ng-deep .mat-form-field-label {
color: rgba(0,0,0,.6)!important;
// color: $mainColor!important;
}
// mat-label focused style
::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
color: red!important;
}
// mat-label error style
::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label {
color: red!important;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)