CSS 更改 mat-form-field 中的边框颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51096529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing border color in mat-form-field
提问by Noober
I am using angular material mat-form-field. I have a dark background, and therefore am trying to change the border of the form-field to white. But I am not able to achieve it using css. No, matter what changes I do in the css, they are not reflecting back into the mat-form-field. Here is the link to my code:
我正在使用角材料mat-form-field。我有一个黑暗的背景，因此我试图将表单域的边框更改为白色。但是我无法使用 css 来实现它。不，无论我在 css 中做了什么更改，它们都不会反映回mat-form-field. 这是我的代码的链接：
Any help would be highly appreciated. Thanks.
任何帮助将不胜感激。谢谢。
回答by sasa suboticki
I think this will cover everything.
我认为这将涵盖一切。
// 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;
}
回答by pzaenger
Add this CSS to your form-field-appearance-example.css:
将此 CSS 添加到您的form-field-appearance-example.css：
/* Border */
.mat-form-field-appearance-outline .mat-form-field-outline {
color: white;
}
/* Font color */
input.mat-input-element {
color: white;
}
Though, there is still a problem while the field is focused.
但是，在专注于该领域时仍然存在问题。
回答by btx
For the newer outlined form fields, solved it this way:
对于较新的概述表单字段，以这种方式解决：
::ng-deep {
.mat-form-field-appearance-outline .mat-form-field-outline {
color: white;
}
mat-form-field {
.mat-hint, input, ::placeholder, .mat-form-field-label {
color: white;
}
}
}
回答by btx
SCSSversion of @sasa with colors as variables
SCSS以颜色作为变量的@sasa 版本
::ng-deep {
$custom-main-color: red;
$custom-label-color: rgba(0, 0, 0, .6);
// mat-icon-stepper selected color change
.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: $custom-main-color !important;
}
// input outline color
.mat-form-field-appearance-outline .mat-form-field-outline {
color: $custom-main-color !important;
}
// mat-input focused color
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
color: $custom-main-color !important;
}
// mat-input error outline color
.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
color: $custom-main-color !important;
opacity: 0.8 !important;
}
// mat-input caret color
.mat-input-element {
caret-color: $custom-main-color !important;
}
// mat-input error caret color
.mat-form-field-invalid .mat-input-element, .mat-warn .mat-input-element {
caret-color: $custom-main-color !important;
}
// mat-label normal state style
.mat-form-field-label {
color: $custom-label-color !important;
}
// mat-label focused style
.mat-form-field.mat-focused .mat-form-field-label {
color: $custom-main-color !important;
}
// mat-label error style
.mat-form-field.mat-form-field-invalid .mat-form-field-label {
color: $custom-main-color !important;
}
}
回答by kumar chandraketu
try this , add/remove ::ng-deep if required
试试这个，如果需要，添加/删除 ::ng-deep
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end {
border-radius: 1px !important;
border: 1px solid red;
border-left:none;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start {
border-radius: 1px !important;
border: 1px solid red;
border-right:none;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap {
border-radius: 1px !important;
border-bottom: 1px solid red;
}
