How to Style Gravity Forms Read-Only Fields

David Smith

/ Updated January 17, 2024 / Leave a Comment

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.