Checkbox background color

I’m trying to change the background color of a checkbox.

in css I have tried:

input[type="checkbox"] {
  position: relative;
  appearance: none;
  background-color: #2ecc71;
  color: #49400c;

this does not work. And in JS im trying:"background-color", "black");"color", "white");

How can I change the background of the checkbox and where are the JS .style() messages documented?

Thanks a lot!


A checkbox does not have a background color. Check those links :

So you either need to use a wrapping div or use :before and :after to add a background color :wink:

1 Like

Thanks a lot for the links, they are useful information.
I think I got it now, but it’s not clear to me how will I color every checkbox differently.
In my code, I have an array of checkboxes and I need to color them independently.
How would I reference my checkbox array from css?