如何使复选框着色（Angular 4+）？答案

【问题标题】：How to make checkbox colored (Angular 4+)?如何使复选框着色（Angular 4+）？
【发布时间】：2019-09-25 01:29:34
【问题描述】：

我想让复选框的输入变为彩色，但不允许。它需要被禁用，因为我不希望它是可点击的。

<p>
<label class="disabled-label"><input type="checkbox" class="disabled-checkbox" checked="checked" disabled="disabled"/>Disabled Checkbox</label>
</p>

【问题讨论】：

看看这个stackoverflow.com/questions/7398462/…
CSS ''background-color" attribute not working on checkbox inside <div>的可能重复
这些都不能解决我的问题。我希望用不同的颜色检查和禁用复选框。目前默认为灰色。
只搜索“样式禁用复选框”
没什么...请检查我的小提琴。尝试改变样式

标签： html css angular

【解决方案1】：

这是我所做的：

.disabled-label:after {
  content: " ";
  background-color: #00A0D1;
  display: inline-block;
  visibility: visible;
}


.disabled-label:checked:after {
  content: '✔';
  box-shadow: 0px 2px 4px rgba(155, 155, 155, 0.15);
  border-radius: 3px;
  height: 13px;
  display: block;
  width: 13px;
  text-align: center;
  font-size: 9px;
  color: white;
}

【讨论】：

【解决方案2】：

根据 W3C，我们不能修改单选框或复选框的颜色或形状。因此，在这种情况下，我们需要设计您自己的控件，其外观和感觉都类似于复选框或单选按钮。

它非常简单，请参考这个。 https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

【讨论】：