How to make checkbox colored (Angular 4+)?

Question

I would like to make the input of the checkbox colored, but it wont allow me. It needs to be disabled, because I don't want it to be clickable.

https://jsfiddle.net/x7ujvm4f/

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

Have a look at this one https://stackoverflow.com/questions/7398462/css-background-color-attribute-not-working-on-checkbox-inside-div — John, Sep 23 '19 at 20:48
Possible duplicate of [CSS ''background-color" attribute not working on checkbox inside
](https://stackoverflow.com/questions/7398462/css-background-color-attribute-not-working-on-checkbox-inside-div) — John, Sep 23 '19 at 20:48
None of these solve my problem. I want the checkbox to be checked and disabled with different color. Currently the default is gray. — , Sep 23 '19 at 20:59

score 1 · Answer 1 · answered Sep 24 '19 at 17:29

Here is what I did:

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

score 0 · Answer 2 · answered Sep 24 '19 at 00:41

As per W3C we cant modifies radio or checkbox color or shape. so, in that case, we need to design your own control which looks and feel like checkbox or radio button.

its very simple please refer this like. https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

How to make checkbox colored (Angular 4+)?

2 Answers2