Checkbox styling with CSS

Get Help
1

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/

Thank you!

2

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.

3

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

4

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.