Note: These selectors apply only to forms using the Orbital theme. If you are using the Gravity Forms 2.5 theme, see the Legacy CSS Selectors documentation.
The Paragraph Text field (internally textarea) renders a multi-line textarea for longer text input.
When “Enable Rich Text Editor” is enabled, the field may render TinyMCE instead of a plain textarea. Both receive framework styling.
When “Maximum Number of Characters” is set, a character counter appears below the input.
The field size setting (small, medium, large) controls the height of the textarea.
For full variable definitions, see the separate CSS API documentation.
Container
The paragraph text field uses the standard field structure:
.gfield.gfield--type-textarea
The field includes an ID in the format field_{form_id}_{field_id} (for example, field_5_3).
.gform-theme--framework .gfield--type-textarea {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-textarea {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
}
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-textarea-radius: 6px;
}
Input
The textarea inherits control styling from the framework. Use the standard control variables on the field or form scope.
Textarea-specific variables include:
--gf-ctrl-textarea-height--gf-ctrl-textarea-radius--gf-ctrl-textarea-line-height--gf-ctrl-textarea-padding-y--gf-ctrl-textarea-resize
The framework applies height using block-size and --gf-ctrl-textarea-height. Because the textarea includes the HTML rows attribute, some browsers may prioritize the rows-derived size over the CSS variable.
To ensure --gf-ctrl-textarea-height applies reliably, add an explicit min-block-size on the textarea. This overrides the rows-derived minimum and allows the variable-based height to apply.
.gform-theme--framework .gfield--type-textarea {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-bg-color-focus: #ffffff;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-border-color-hover: #b8bcc4;
--gf-ctrl-textarea-height: 150px;
--gf-ctrl-textarea-radius: 6px;
--gf-ctrl-font-size: 16px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-textarea {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-textarea-height: 180px;
--gf-ctrl-font-size: 16px;
}
.gform-theme--framework .gfield--type-textarea .ginput_container_textarea textarea {
min-block-size: 120px;
}
Note: When the Rich Text Editor is enabled, the field renders TinyMCE. The visible editing area is inside an iframe. Styling the textarea directly applies when RTE is disabled; when RTE is enabled, most textarea styling affects the underlying hidden textarea or the TinyMCE container.
Maximum Characters Counter
When “Maximum Number of Characters” is enabled, a counter appears below the textarea (for example: “0 of 500 max characters”).
The counter uses:
.charleft.ginput_counter.gfield_description
When approaching the limit, the class .warningTextareaInfo may be added.
.gform-theme--framework .gfield--type-textarea .charleft,
.gform-theme--framework .gfield--type-textarea .ginput_counter {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
margin-top: 8px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-textarea .charleft {
--gf-ctrl-desc-color: #4b5563;
--gf-ctrl-desc-font-size: 13px;
}
.gform-theme--framework .gfield--type-textarea .charleft.warningTextareaInfo {
--gf-ctrl-desc-color: #112337;
}
Counter Over Limit (TinyMCE Only)
When “Enable Rich Text Editor” is enabled, the counter receives .ginput_counter_error when the maximum is exceeded. Plain textarea fields do not use this class.
.gform-theme--framework .gfield--type-textarea .charleft.ginput_counter_error {
--gf-ctrl-desc-color: #c02b0a;
}
Field Label
Paragraph text fields use the standard .gform-field-label for the main label.
Override label variables on the field scope.
.gform-theme--framework .gfield--type-textarea {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-textarea {
--gf-ctrl-label-color-primary: #112337;
--gf-ctrl-label-font-size-primary: 18px;
}
Field Description
When a description is set, it appears above or below the input depending on the form’s description placement setting.
Use --gf-ctrl-desc-color and --gf-ctrl-desc-font-size for description styling.
.gform-theme--framework .gfield--type-textarea {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
Use Case Examples
Paragraph Field with Accent Border
.gform-theme--framework .gfield--type-textarea {
--gf-ctrl-border-color: #204ce5;
--gf-ctrl-border-color-hover: #044ad3;
--gf-ctrl-textarea-radius: 6px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-textarea {
--gf-ctrl-border-color: #204ce5;
--gf-ctrl-textarea-radius: 6px;
}
Compact Paragraph Fields on a Specific Page
.page-id-571 .gform-theme--framework .gfield--type-textarea {
--gf-ctrl-label-font-size-primary: 14px;
--gf-ctrl-desc-font-size: 12px;
--gf-ctrl-textarea-height: 100px;
}
.page-id-571 .gform-theme--framework .gfield--type-textarea .ginput_container_textarea textarea {
min-block-size: 50px;
}
Targeting a Specific Paragraph Field
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-bg-color: #f8fafc;
--gf-ctrl-label-color-primary: #0f172a;
--gf-ctrl-desc-color: #64748b;
}
Taller Paragraph Field for Long-Form Content
.gform-theme--framework .gfield--type-textarea {
--gf-ctrl-textarea-height: 250px;
--gf-ctrl-textarea-resize: vertical;
}
.gform-theme--framework .gfield--type-textarea .ginput_container_textarea textarea {
min-block-size: 120px;
}
CSS API Reference
For full variable definitions, see the separate CSS API documentation.