How to Style Gravity Forms Read-Only Fields
An overview of how to style read-only and disabled fields with CSS. Includes examples of how to target specific field types and different methods of styling.

January 19, 2017: Added example for targeting disabled input label.
Set Field as Read-Only
Before any of this styling can be applied, we first need to actually set the field as read-only. You can do this with Javascript (like so) or you can use our Gravity Forms Read Only plugin which let’s you set all applicable fields as read-only with the click of a button.
Targeting Desired Fields
You can style most field types with the the following CSS selector. Drop down, Checkboxes and Radio Button fields require slightly different selectors.
Most Fields
Drop Downs
Checkboxes & Radio Buttons
Checkbox & Radio Button Labels
Textareas
Styling the Fields
These examples are based on the Most Fields example above. Just change the selector to apply them to Drop Downs, Checkboxes or Radio Buttons. These styles would go in your theme’s style.css file.
Change Font Color
Make the field value appear to be grayed out.
Change the Cursor
Change the cursor to indicate that the field is not editable.
Hide the “Input”
Give the appearance that the text is not actually being displayed within an input. View the demo for a visual example.
Combining Multiple Styles
Full Style Guide
You can download all of the styles outlined in this article in a single file from our Snippet Library.