# Checkbox styling with CSS

**URL:** <https://community.gravityforms.com/t/checkbox-styling-with-css/1714>\
**Category:** Get Help\
**Tags:** css\
**Created:** [April 28, 2019, 2:12pm UTC](https://community.gravityforms.com/t/checkbox-styling-with-css/1714 "2019-04-28T14:12:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![user5c9be1967f156371](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/user5c9be1967f156371/32/14390_2.png) [@user5c9be1967f156371](https://community.gravityforms.com/u/user5c9be1967f156371)\
**Post date:** [April 28, 2019, 2:12pm UTC](https://community.gravityforms.com/t/checkbox-styling-with-css/1714/1 "2019-04-28T14:12:35Z")

</div>

Hello!

I would like to change the background-color and border-color of checkboxes on my form but cannot find the right CSS to do so, It seems that using input[type=checkbox] is not possible. I would greatly appreciate any guidance. Here is a link to my form: [https://dot832.dev/myvasst/contact-me/](https://dot832.dev/myvasst/contact-me/)

Thank you!

---

<div class="post-metadata">

**Author:** ![Parkbum](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/parkbum/32/810_2.png) [@Parkbum](https://community.gravityforms.com/u/Parkbum)\
**Post date:** [April 28, 2019, 4:18pm UTC](https://community.gravityforms.com/t/checkbox-styling-with-css/1714/2 "2019-04-28T16:18:55Z")

</div>

Hmmm… I see what you mean. Styling the individual list items works:

```
#input_1_6 > li.gchoice_1_6_1{
background-color: blue;
}

```

I’ll keep playing with it but it seems to have a CSS that is already set to `!important`. It’s probably in the gravity CSS somewhere. Maybe try a custom CSS with `:after`.

---

<div class="post-metadata">

**Author:** ![user5c9be1967f156371](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/user5c9be1967f156371/32/14390_2.png) [@user5c9be1967f156371](https://community.gravityforms.com/u/user5c9be1967f156371)\
**Post date:** [April 28, 2019, 4:38pm UTC](https://community.gravityforms.com/t/checkbox-styling-with-css/1714/3 "2019-04-28T16:38:37Z")

</div>

Hi @Parkbum,

Thanks for your reply however that isn’t what I’m looking for. I only want to change the background color of the checkbox itself.

Cheers!  
Tim

---

<div class="post-metadata">

**Author:** ![Parkbum](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/parkbum/32/810_2.png) [@Parkbum](https://community.gravityforms.com/u/Parkbum)\
**Post date:** [April 29, 2019, 3:54am UTC](https://community.gravityforms.com/t/checkbox-styling-with-css/1714/4 "2019-04-29T03:54:50Z")

</div>

Totally get that and it SHOULD have worked using something like this:

```
input[type="checkbox"] + label:before{
    background-color: green;
}

```

But so far I haven’t been able to get it to go the way you want. I think that it is something deeper within Gravity Forms that is preventing it.

I did find a cool alternative. You should try this out:

```
input[type="checkbox"]:hover + label{
    background-color: red;
}

```

Might not be what you want but it’s a fairly good option.

---

<div class="post-metadata">

**Author:** ![richardw8k](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/richardw8k/32/2354_2.png) [@richardw8k](https://community.gravityforms.com/u/richardw8k)\
**Post date:** [January 4, 2022, 5:28pm UTC](https://community.gravityforms.com/t/checkbox-styling-with-css/1714/5 "2022-01-04T17:28:46Z")

</div>