Style your Gravity Forms checkbox & radio fields into buttons with CSS

July 26, 2022 by JetSloth

We’ve had a few JetSloth customers ask us to help with styling their radio and checkbox fields to look more like buttons. This goes hand in hand with our Gravity Forms Image Choices add-on. So we’ve finally spent some time on a quick tutorial/helpful resources to allow you to do this.

CSS Note
For best results, please use a newer version of Gravity Forms 2.5+ and the new markup it provides.

Live Demo

The demo below shows how with some clever custom CSS, you can make your ordinary-looking radio and checkbox fields, look more modern and responsive. You can easily update the CSS to change the feature color from blue to your own custom color. Same goes with the light grey.

Using Gravity Forms CSS column classes

To make things even easier, we’ve used the default inbuilt Gravity Forms CSS column classes to get the 2 col and 3 col layout effect. Just add those into your appearance tab on each field group. More in the link below and how to use CSS classes.

Gravity CSS Classes

Gravity Forms 2.5+ CSS

Use the below CSS if you’re using a newer version of Gravity Forms with the new markup enabled.

Gravity Forms Legacy markup

If you’ve got legacy markup enabled on your form, use the below CSS.

In Summary

We had a blast putting these examples together. With some small CSS tweaks, you can achieve pretty much any style you’d like, to help suit the design and theme of your overall website. Just remember to use those Gravity Forms CSS column classes to help do the heavy lifting with layouts.

Let us know if you love this stuff and we’ll keep making it!