Adding Custom CSS
It’s really easy to add custom CSS for styling the image choices in your forms. Of course if you’re a theme developer or have the ability to edit your theme’s CSS file you can add your styles there. As an alternative we’ve provided an area for global custom CSS on the plugin settings page, and and area for form specific custom CSS on the form settings page.
For the global custom CSS just visit the Gravity Forms Settings page and click on the Image Choices tab – the same page where you enter your license key. The CSS you enter here will be loaded for all forms by default.
For custom CSS on specific forms visit the form settings page and click on the Image Choices tab. The CSS you enter here will only be loaded for that form. You also have a setting option here to ignore the global custom CSS. If this option is enabled, then the global custom CSS won’t be loaded for this form. Else by default both the the global and form custom CSS will be loaded.
Image Choices Markup
Below are a couple of examples of the field markup for image choices that might help you work out how you can apply custom styles.
Standard field
Radio button and checkbox fields are very similar in their structure. Main differences are the field type and some of the default gf classes. The Image Choices markup and classes are no different.
Product Option field
The product option field is a little different as it also includes an element for the price
Additional classes
There are some additional classes that are toggled on the image-choices-choice element. When a user’s cursor is over a choice it will receive the image-choices-choice-hover class. And when a choice is selected it will receive the image-choices-choice-selected class. You can use these to style the hover and selected states of image choices.
Example styles
See some of our other support articles for specific styling examples you can use:
