Checkbox and radio button styling

Get Help
, , , ,
1

Hello!

I would like to change the styling of checkbox and radio button using custom CSS:

  1. change the size of checkbox and radio button input icons.
  2. change label vertical alignment.

Have checked Gravity documentation related to CSS targeting examples but could not figure our how to proceed.

Thank you in advance!

2

Hi Juri. Please provide a link to the page on your site where we can see the form. Thank you.

3

Hi Chris!

The website is in maintenance mode. May I e-mail you the temporary login instead?

4

Hi Juri,

I’m afraid checkboxes/radio buttons are elements generated by the browser not by Gravity Forms so they can’t be customized easily only with CSS as you can do with other elements of the form.

You can incorporate a JavaScript library to change how your checkboxes/radio buttons are displayed and work. This is not a feature of Gravity Forms, but you can include the script in your page, then use it to change how the checkboxes look. There are quite a few plugins listed here http://www.sitepoint.com/15-jquery-radio-button-checkbox-style-plugins/ and I’m sure you can find a more recent list as well.

Regarding to the choices label vertical alignment, please check the following CSS targeting examples:

Please check the following doc page for instructions about where to add your custom CSS: https://docs.gravityforms.com/where-to-put-your-custom-css/

Also if you’re using any caching solution make sure that your have flushed the cache and turned it off while you’re working in the CSS changes. And empty your browser cache too to see the changes.

1 Like
5

Thank you, Samuel! I will try out these options.

6

Hi there,

Since last Divi theme update, our checkboxes are all of a sudden aligned in the center? Guess this has something to do with CSS inherited by the theme, but cannot find how to fix this.

We want our checkboxes aligned to the left of course.

Thanks to point me in the right direction,
erik