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

.gform_wrapper input[readonly='readonly'] {
	/* custom styles */
}

Drop Downs

.gform_wrapper select[disabled='disabled'] {
	/* custom styles */
}

Checkboxes & Radio Buttons

.gform_wrapper input[disabled='disabled'] {
	/* custom styles */
}

Checkbox & Radio Button Labels

.gform_wrapper input[disabled='disabled'] + label {
	/* custom styles */
}

Textareas

.gform_wrapper textarea[readonly='readonly'] {
	/* custom styles */
}

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.

.gform_wrapper input[readonly='readonly'] {
	color: #999;
}

Change the Cursor
Change the cursor to indicate that the field is not editable.

.gform_wrapper input[readonly='readonly'] {
	cursor: not-allowed;
}

Hide the “Input”
Give the appearance that the text is not actually being displayed within an input. View the demo for a visual example.

.gform_wrapper input[readonly='readonly'] {
	border-color: transparent;
}

Combining Multiple Styles

.gform_wrapper input[readonly='readonly'] {
	color: #999;
	border-color: transparent;
	cursor: not-allowed;
}

Full Style Guide

You can download all of the styles outlined in this article in a single file from our Snippet Library.

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.

Grab a bundle of free Gravity Forms plugins

Enter your email and receive our most popular free plugins and snippets, plus access to hundreds of others.

This field is for validation purposes and should be left unchanged.