Как сделать флажок цветным (Angular 4+)?

Question

Я бы хотел, чтобы флажок был окрашен, но он мне не позволил.Его нужно отключить, потому что я не хочу, чтобы он был кликабельным.

https://jsfiddle.net/x7ujvm4f/

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

Answer 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;
}

Answer 2

Согласно W3C, мы не можем изменить цвет или форму радио или флажка.поэтому в этом случае нам нужно разработать собственный элемент управления, который будет выглядеть и ощущаться как флажок или переключатель.

это очень просто, обратитесь к этому как.https://www.w3schools.com/howto/howto_css_custom_checkbox.asp