# Styling Consent Checkbox with CSS

**URL:** <https://community.gravityforms.com/t/styling-consent-checkbox-with-css/11132>\
**Category:** Get Help\
**Tags:** consent, css\
**Created:** [November 8, 2021, 9:17pm UTC](https://community.gravityforms.com/t/styling-consent-checkbox-with-css/11132 "2021-11-08T21:17:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jgiroux](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/jgiroux/32/3939_2.png) [@jgiroux](https://community.gravityforms.com/u/jgiroux)\
**Post date:** [November 8, 2021, 9:17pm UTC](https://community.gravityforms.com/t/styling-consent-checkbox-with-css/11132/1 "2021-11-08T21:17:46Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![user5c0166073a6c48.6](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/user5c0166073a6c48.6/32/17391_2.png) [@user5c0166073a6c48.6](https://community.gravityforms.com/u/user5c0166073a6c48.6)\
**Post date:** [November 8, 2021, 9:19pm UTC](https://community.gravityforms.com/t/styling-consent-checkbox-with-css/11132/2 "2021-11-08T21:19:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jgiroux](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/jgiroux/32/3939_2.png) [@jgiroux](https://community.gravityforms.com/u/jgiroux)\
**Post date:** [November 8, 2021, 9:31pm UTC](https://community.gravityforms.com/t/styling-consent-checkbox-with-css/11132/3 "2021-11-08T21:31:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![user5c0166073a6c48.6](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/user5c0166073a6c48.6/32/17391_2.png) [@user5c0166073a6c48.6](https://community.gravityforms.com/u/user5c0166073a6c48.6)\
**Post date:** [November 9, 2021, 1:03am UTC](https://community.gravityforms.com/t/styling-consent-checkbox-with-css/11132/4 "2021-11-09T01:03:29Z")

</div>

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.

```auto
.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

---

<div class="post-metadata">

**Author:** ![sacom](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/sacom/32/53_2.png) [@sacom](https://community.gravityforms.com/u/sacom)\
**Post date:** [November 9, 2021, 1:55pm UTC](https://community.gravityforms.com/t/styling-consent-checkbox-with-css/11132/5 "2021-11-09T13:55:13Z")

</div>

@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](https://travis.media/create-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/](https://www.sitepoint.com/15-jquery-radio-button-checkbox-style-plugins/)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/2X/f/fef63f0599c45e0218c30d9f5d7ca8bff9b00189.png) [@system](https://community.gravityforms.com/u/system)\
**Post date:** [December 10, 2021, 1:09am UTC](https://community.gravityforms.com/t/styling-consent-checkbox-with-css/11132/7 "2021-12-10T01:09:17Z")

</div>

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