Post Excerpt CSS Selectors

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 Post Excerpt field allows users to submit content used as the excerpt of a post. It renders a multi-line textarea with height controlled by field size (small, medium, large).

Each field includes an ID in the format field_{form_id}_{field_id}. Example: field_5_3.

For full variable definitions, see the CSS API documentation.

Container

The Post Excerpt field uses .gfield, .gfield--type-post_excerpt, and .ginput_container_post_excerpt.

Input

The textarea inherits control styling from the framework. Important textarea variables:

  • --gf-ctrl-textarea-height
  • --gf-ctrl-textarea-radius
  • --gf-ctrl-textarea-line-height
  • --gf-ctrl-textarea-padding-y
  • --gf-ctrl-textarea-resize

Use --gf-ctrl-textarea-radius (not generic radius variables). To ensure height works properly, set a min-block-size.

/* example: post excerpt textarea styling – applies to all Orbital forms */
.gform-theme--framework .gfield--type-post_excerpt {
	--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;
}

/* example: post excerpt textarea styling – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-post_excerpt {
	--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;
}

/* enable textarea height to override rows */
.gform-theme--framework .gfield--type-post_excerpt .ginput_container_post_excerpt textarea {
	min-block-size: 120px;
}

Field Label

/* example: post excerpt field label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-post_excerpt {
	--gf-ctrl-label-color-primary: #1a365d;
	--gf-ctrl-label-font-size-primary: 16px;
}

/* example: post excerpt field label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-post_excerpt {
	--gf-ctrl-label-color-primary: #112337;
	--gf-ctrl-label-font-size-primary: 18px;
}

Field Description

/* example: post excerpt field description – applies to all Orbital forms */
.gform-theme--framework .gfield--type-post_excerpt {
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
}

Use Case Examples

Post Excerpt with Accent Border

/* example: post excerpt field with accent border – applies to all Orbital forms */
.gform-theme--framework .gfield--type-post_excerpt {
	--gf-ctrl-border-color: #204ce5;
	--gf-ctrl-border-color-hover: #044ad3;
	--gf-ctrl-textarea-radius: 6px;
}

/* example: same – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-post_excerpt {
	--gf-ctrl-border-color: #204ce5;
	--gf-ctrl-textarea-radius: 6px;
}

Targeting a Specific Post Excerpt Field

/* example: specific post excerpt field by ID – applies just to form 112, field 4 */
.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;
	--gf-ctrl-textarea-height: 200px;
}

Taller Post Excerpt for Long-Form Content

/* example: taller textarea for excerpt fields – applies to all Orbital forms */
.gform-theme--framework .gfield--type-post_excerpt {
	--gf-ctrl-textarea-height: 250px;
	--gf-ctrl-textarea-resize: vertical;
}

/* enable variable-based height */
.gform-theme--framework .gfield--type-post_excerpt .ginput_container_post_excerpt textarea {
	min-block-size: 120px;
}

CSS API Reference

For full variable definitions, see the separate CSS API documentation.