Styling Consent Checkbox with CSS

Get Help
,
1

Hello!

I am trying to style a consent checkbox but I seem to be running into some issues. Right now I’m targeting the checkbox generally (as opposed to just the one used for consent) and somehow it is being overridden by a class somewhere else. I’m looking to:

  1. Change the border color and thickness
  2. Change the background color when checked
  3. Change the background color when checked and hovered over

When I inspect using Chrome Dev Tools, I cannot see where the thickness or color of the border is being set, nor can I see what class is acting on the checkbox to set background colour. Does anyone have any ideas?

Thanks!

2

When you open dev tools hover over the element and you’ll see a different selector than when you click the element.

3

Thanks Derek! I tried that and unfortunately, it didn’t seem to work… it’s a conundrum.

4

Add a ready class to the consent field called consent. Then the CSS should work. I haven’t tested this so confirm it is working.

.gform_wrapper .gfield.consent input[type="checkbox"] {
    border-color: red;
    border-style: solid;
    border-width: 5px;
}

You will need to come up with the rest of the CSS but this should get you started.

Oh and welcome to the community. Lol

5

@jgiroux Note that checkboxes are elements generated by the browser not by Gravity Forms, so they don’t accept most CSS properties that you can use to easily style other elements.

So instead of trying to target the default checkbox input generated by the browser, best practice is to hide the default checkbox input and replace it with a custom element.

The following third-party tutorial suggests a CSS only approach that does that: How To Create A Custom Checkbox In Gravity Forms

There are also third-party JavaScript libraries that you could add to your page for checkbox and other elements customization: https://www.sitepoint.com/15-jquery-radio-button-checkbox-style-plugins/

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.