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. Style your Gravity Forms checkbox & radio fields into buttons with CSS.
For best results, please use a newer version of Gravity Forms 2.5+ and the new markup it provides.
Live Demo Gravity Forms custom CSS
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 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 Gravity Forms custom CSS
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!