Search code examples
htmlcssinputcheckboxstyles

How do I change the color of the checkbox?

Ok so I made a show hide toggle checkbox for a password input. However, I cannot figure out how to get the "when checked" background of the checkbox to be a different color.

In our existing code base there is a custom checkbox that uses custom styling, however I cannot use this checkbox for this feature as it does not use ng-model.

enter image description here

<input style="color: #009688;" type="checkbox">

Solution

  • In the standard way, you cannot set the background color for checkbox without using plugins or custom modifications. But there is one trick that will allow you to give the background color. Use rule filter with parameter hue-rotate().

    Also, it is possible to get the value deg by converting the RGB code.

    input[type="checkbox"]:nth-child(1):checked {
    filter: hue-rotate(240deg);
}

input[type="checkbox"]:nth-child(2):checked {
    filter: hue-rotate(285deg);
}


input[type="checkbox"]:nth-child(3):checked {
    filter: hue-rotate(300deg);
}

input[type="checkbox"]:nth-child(4):checked {
    filter: hue-rotate(320deg);
}
    <input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox"> <!--ORIGINAL-->