# Checkbox background color

**URL:** <https://discourse.processing.org/t/checkbox-background-color/28527>\
**Category:** Coding Questions\
**Created:** [March 14, 2021, 12:25pm UTC](https://discourse.processing.org/t/checkbox-background-color/28527 "2021-03-14T12:25:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![xbix](https://avatars.discourse-cdn.com/v4/letter/x/ec9cab/32.png) [@xbix](https://discourse.processing.org/u/xbix)\
**Post date:** [March 14, 2021, 12:25pm UTC](https://discourse.processing.org/t/checkbox-background-color/28527/1 "2021-03-14T12:25:55Z")

</div>

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

in css I have tried:

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

```

this does not work. And in JS im trying:

```auto
      checkbox.style("background-color", "black");
      checkbox.style("color", "white");

```

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

Thanks a lot!

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [March 14, 2021, 2:53pm UTC](https://discourse.processing.org/t/checkbox-background-color/28527/2 "2021-03-14T14:53:16Z")

</div>

Hi,

> [@xbix](#):
>
> I’m trying to change the background color of a checkbox.

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

> <https://stackoverflow.com/questions/7398462/css-background-color-attribute-not-working-on-checkbox-inside-div>

> <https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css>

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

---

<div class="post-metadata">

**Author:** ![xbix](https://avatars.discourse-cdn.com/v4/letter/x/ec9cab/32.png) [@xbix](https://discourse.processing.org/u/xbix)\
**Post date:** [March 25, 2021, 9:26am UTC](https://discourse.processing.org/t/checkbox-background-color/28527/3 "2021-03-25T09:26:36Z")

</div>

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?