本文介绍了如何正确设置垫子复选框的样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试根据以下要求设置垫子复选框(材质2)的样式：
始终可见的黑色边框(与选中状态无关)(#0000000)
选中时，"勾号"将为白色(#ffffff)，背景为蓝色(边框仍可见)
如果取消选中，则复选框的背景(在边框内)应为白色(#DDDDDD)。到目前为止，我已经能够设置边框颜色，但选中后，它会消失在青色后面
我可以设置未选中的背景色，但这样做时，黑色边框也会消失。如果删除此设置，则会显示边框，但背景颜色错误。
我正在设置的SCSS属性如下：
::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: mat-color($darkPrimary, darker); //black
}
::ng-deep .mat-checkbox-background {
background-color: mat-color($darkPrimary, 200); //off-white
}
似乎无论我将背景设置为什么，都会覆盖边框样式。此外，当我更改复选框的状态时，黑色边框短暂出现，然后再次消失。我如何满足这些要求？
推荐答案
我意识到角度复选框是按层绘制的，最后绘制的是"Tick"层，位于黑色边框的顶部。
// Background border
.mat-checkbox .mat-checkbox-frame {
border-color: black;
background-color: #dddddd
}
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {
margin-top: 1px;
margin-left: 1px;
width: 18px;
height: 18px;
}
通过减小前面层的大小并稍微移动它，边框仍然可见。
这篇关于如何正确设置垫子复选框的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！