![](/img/trans.png)
[英]Checkbox border color styling in Angular material (md-checkbox)
[英]Angular Material design checkbox black foreground color (symbol color)
我在我的應用程序中使用<mat-checkbox> ... </mat-checkbox>
組件,我需要將符號的顏色(“tick”✓)設置為黑色。 我可以通過css設置背景顏色,但沒有任何東西適用於“前景”顏色。
碼:
my.ts
<mat-checkbox name="{{field.name}}"
[ngModel]="field.valueChecked"
...
[ngClass]="{
'mandatory': field.mandatory == true
,'optional': field.mandatory == false
,'checkbox' : true}"
>
</mat-checkbox>
my.css
.checkbox {
background-color: #3197ee !important;
color: #050911 !important;
}
任何解決方案如何改變顏色是受歡迎的!
嘗試這個
.mat-checkbox-checkmark-path {
stroke: #000 !important;
}
要么
/deep/ .mat-checkbox-checkmark-path {
stroke: #000 !important;
}
請嘗試下面的CSS代碼。 它會工作。
input[type="checkbox"]:checked + label::after {
content: '';
position: absolute;
width: 1.2ex;
height: 0.4ex;
background: rgba(0, 0, 0, 0);
top: 0.9ex;
left: 0.4ex;
border: 3px solid #000000;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type="checkbox"] {
line-height: 2.1ex;
}
input[type="checkbox"] {
position: absolute;
left: -999em;
}
input[type="checkbox"] + label {
position: relative;
overflow: hidden;
cursor: pointer;
}
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
vertical-align: -25%;
height: 2ex;
width: 2ex;
background-color: #3197ee;
border: 1px solid rgb(166, 166, 166);
border-radius: 4px;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.25);
margin-right: 0.5em;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.