[英]Checkbox border color styling in Angular material (md-checkbox)
[英]md-checkbox Angular materials styling
使用Angular4的Angular材质,我检查后找不到更改复选框颜色的方法。
在初始视图中修改样式的唯一方法是:
:host /deep/ .mat-checkbox-inner-container{
height:15px;
width:15px;
background-color: rgba(0, 255, 0, 0.87);
}
尝试在选中后更改样式,以下操作无效:
:host /deep/ .mat-checkbox-checked {
background-color:yellow;
}
它实际上是在检查后应用,但是在错误的元素中 - 不适用于内部容器。
像:host /deep/ .mat-checkbox-inner-container-checked
这样的东西也不行。
欢迎任何帮助。
试试这一个:)
.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: rgb(27, 142, 241) !important;
}
.mat-ripple-element {
background: rgba(27, 142, 241, .4) !important;
}
试试这一个:)
/deep/ .mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background
{
background-color: rgb(27, 142, 241) !important;
}
/deep/ .mat-ripple-element {
background: rgba(27, 142, 241, .4) !important;
}
这里/deep/
很重要,否则它将无效。 根据Angular文档:
组件样式通常仅适用于组件自己的模板中的HTML。
使用
/deep/
shadow-penetcing descendant组合器将样式向下强制通过子组件树到所有子组件视图中。 / deep / combinator适用于任何深度的嵌套组件,它适用于视图子节点和组件的内容子节点。
/deep/
combinator还有别名>>>
和::ng-deep
。- https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
尝试使用.md-checkbox.md-checked
参考Checkbox样式 ,
:host /deep/ .md-checkbox.md-checked .md-icon {
background-color:yellow!important;
}
尝试在您的component.ts文件中添加encapsulation: ViewEncapsulation.None
并在CSS中:
.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background: yellow;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.