Post Title 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 Title field lets users submit a post title. It renders a single-line text input (input[type="text"]) with width 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 Title field uses .gfield, .gfield--type-post_title, and .ginput_container_post_title.

Input

The Post Title input is always input[type="text"].

/* example: post title input styling – applies to all Orbital forms */
.gform-theme--framework .gfield--type-post_title {
	--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-font-size: 16px;
}

/* example: post title input styling – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-post_title {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-font-size: 16px;
}

/* example: input width – no variable; use direct property */
.gform-theme--framework .gfield--type-post_title input {
	max-width: 300px;
}

Field Label

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

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

Field Description

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

Use Case Examples

Post Title with Accent Border

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

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

Targeting a Specific Post Title Field

/* example: specific post title 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;
}

CSS API Reference

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