Checkbox styling with CSS


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:

Thank you!

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.

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.


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.