Single Line Text Field 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 Single Line Text field renders a single input element for short text entry.

The field wrapper uses .gfield--type-text and .gfield--input-type-text for both standard text and password mode. The wrapper class does not change when “Enable Password” is on; only the input’s type attribute changes to password.

When “Maximum Number of Characters” is set, a character counter appears below the input.

The size setting (small, medium, large) adds the class small, medium, or large to the input and maps to:

  • --gf-ctrl-size-sm (35px)
  • --gf-ctrl-size-md (38px)
  • --gf-ctrl-size-lg (47px)

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

Container

The single line text field uses the standard field structure:

  • .gfield
  • .gfield--type-text
  • .gfield--input-type-text

The field has an ID attribute in the format field_{form_id}_{field_id} (e.g. field_1926_1 for form 1926, field 1).

/* example: single line text field container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-text {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
}

/* example: single line text field container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-text {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
}

/* example: specific single line text field radius – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-radius: 6px;
}

Input

The input inherits control styling from the framework. Use the standard control variables on the field or form scope.

The input may be type="text" or type="password" when the password option is enabled; both receive the same framework styling.

The input receives a size class (small, medium, or large) that drives its height via --gf-ctrl-size.

The wrapper retains .gfield--input-type-text for both modes. To target only password inputs, use input[type="password"].

/* example: single line text input styling – applies to all Orbital forms */
.gform-theme--framework .gfield--type-text {
	--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: single line text input styling – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-text {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-font-size: 16px;
}

/* example: taller large inputs by size class – applies to all Orbital forms */
.gform-theme--framework .gfield--type-text input.large {
	--gf-ctrl-size: 50px;
}

/* example: placeholder styling – use direct ::placeholder when variable override does not apply – applies to all Orbital forms */
.gform-theme--framework .gfield--type-text input::placeholder {
	color: rgba(17, 35, 55, 0.5);
	font-size: 16px;
}

/* example: input width – no variable; use direct property – applies to all Orbital forms */
.gform-theme--framework .gfield--type-text input {
	max-width: 300px;
}

Maximum Characters Counter

When “Maximum Number of Characters” is set in the field settings, a counter appears below the input (e.g. “0 of 500 max characters”).

This element uses the classes:

  • .charleft
  • .ginput_counter

It also inherits .gfield_description.

It may include .warningTextareaInfo when approaching the limit and .errorTextareaInfo when over the limit.

/* example: character counter styling – applies to all Orbital forms */
.gform-theme--framework .gfield--type-text .charleft,
.gform-theme--framework .gfield--type-text .ginput_counter {
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
	margin-top: 8px;
}

/* example: character counter – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-text .charleft {
	--gf-ctrl-desc-color: #4b5563;
	--gf-ctrl-desc-font-size: 13px;
}

/* example: counter when approaching limit (warning state) – applies to all Orbital forms */
.gform-theme--framework .gfield--type-text .charleft.warningTextareaInfo {
	--gf-ctrl-desc-color: #112337;
}

Field Label

Single line text fields use the standard label structure:

  • gfield_label
  • gform-field-label

For required fields, a nested gfield_required and gfield_required_text span (e.g. “(Required)”) is included.

Override label variables on the field scope.

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

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

/* example: required indicator styling – applies to all Orbital forms */
.gform-theme--framework .gfield--type-text.gfield_contains_required {
	--gf-ctrl-label-color-req: #c02b0a;
	--gf-ctrl-label-font-size-req: 12px;
}

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.

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

Use Case Examples

Single Line Text Field with Accent Border

/* example: single line text field with accent border – applies to all Orbital forms */
.gform-theme--framework .gfield--type-text {
	--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-text {
	--gf-ctrl-border-color: #204ce5;
	--gf-ctrl-radius: 6px;
}

Targeting a Specific Single Line Text Field

/* example: specific single line text 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;
}

Password Field Styling

When “Enable Password” is on, the input uses type="password". The wrapper retains .gfield--input-type-text; there is no .gfield--input-type-password for this field type.

Use input[type="password"] to target password inputs only.

/* example: password inputs only in Single Line Text fields – applies to all Orbital forms */
.gform-theme--framework .gfield--type-text input[type="password"] {
	--gf-ctrl-bg-color: #f8f9fa;
	--gf-ctrl-placeholder-color: rgba(17, 35, 55, 0.45);
}

/* example: direct placeholder for password inputs – applies to all Orbital forms */
.gform-theme--framework .gfield--type-text input[type="password"]::placeholder {
	color: rgba(17, 35, 55, 0.45);
}

CSS API Reference

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