Address 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 Address field renders multiple sub-fields: Street Address (Address Line 1), Address Line 2, City, State, Zip Code, and Country.

Sub-fields use the following classes:

  • .address_line_1
  • .address_line_2
  • .address_city
  • .address_state
  • .address_zip
  • .address_country

They may also appear with prefixed classes such as .ginput_address_line_1, .ginput_address_city, and .ginput_address_state.

Street through Zip fields render as input elements. The State field may render as either an input (international address format) or a select (US or Canadian format). The Country field always renders as a select.

The layout follows the Gravity Forms grid system, and individual subfields can be shown or hidden via field settings.

For full variable definitions, see the CSS API documentation.

Main Field Container

The Address field uses a fieldset wrapper with .gfield–type-address and an inner container .ginput_container_address.

Each field includes an ID in the format field_{form_id}_{field_id} (e.g. field_5_3 for form 5, field 3).

.gform-theme--framework .gfield--type-address {
	--gf-ctrl-label-color-primary: #1a365d;
	--gf-ctrl-label-font-size-primary: 16px;
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-address {
	--gf-ctrl-label-color-primary: #112337;
	--gf-ctrl-desc-font-size: 14px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-radius: 6px;
}

Address Line 1

The Address Line 1 container uses .address_line_1 and .ginput_address_line_1.

.gform-theme--framework .gfield--type-address .address_line_1 {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-address .address_line_1 {
	--gf-ctrl-bg-color: #f9f9f9;
}

.gform-theme--framework .gfield--type-address .address_line_1 {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-font-size: 16px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-address .address_line_1 {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-font-size: 16px;
}

Sub-labels such as Street Address use .gform-field-label–type-sub. To target all address sub-labels at once, use .gfield–type-address .gform-field-label–type-sub.

.gform-theme--framework .gfield--type-address .address_line_1 .gform-field-label--type-sub {
	--gf-ctrl-label-color-tertiary: #1a365d;
	--gf-ctrl-label-font-size-tertiary: 16px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-address .address_line_1 .gform-field-label--type-sub {
	--gf-ctrl-label-color-tertiary: #112337;
}

Address Line 2

The Address Line 2 container uses .address_line_2 and .ginput_address_line_2.

.gform-theme--framework .gfield--type-address .address_line_2 {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
}

.gform-theme--framework .gfield--type-address .address_line_2 {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-border-color: #d2d5db;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-address .address_line_2 {
	--gf-ctrl-bg-color: #ffffff;
}

.gform-theme--framework .gfield--type-address .address_line_2 .gform-field-label--type-sub {
	--gf-ctrl-label-color-tertiary: #1a365d;
	--gf-ctrl-label-font-size-tertiary: 16px;
}

City

The City container uses .address_city and .ginput_address_city.

.gform-theme--framework .gfield--type-address .address_city {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
}

.gform-theme--framework .gfield--type-address .address_city {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-border-color: #d2d5db;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-address .address_city {
	--gf-ctrl-font-size: 16px;
}

.gform-theme--framework .gfield--type-address .address_city .gform-field-label--type-sub {
	--gf-ctrl-label-color-tertiary: #1a365d;
	--gf-ctrl-label-font-size-tertiary: 16px;
}

State

The State container uses .address_state and .ginput_address_state. The State field may render as an input or a select, depending on the address format.

.gform-theme--framework .gfield--type-address .address_state {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
}

.gform-theme--framework .gfield--type-address .address_state {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-border-color: #d2d5db;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-address .address_state {
	--gf-ctrl-font-size: 16px;
}

.gform-theme--framework .gfield--type-address .address_state .gform-field-label--type-sub {
	--gf-ctrl-label-color-tertiary: #1a365d;
	--gf-ctrl-label-font-size-tertiary: 16px;
}

Zip Code

The Zip Code container uses .address_zip and .ginput_address_zip.

.gform-theme--framework .gfield--type-address .address_zip {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
}

.gform-theme--framework .gfield--type-address .address_zip {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-border-color: #d2d5db;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-address .address_zip {
	--gf-ctrl-font-size: 16px;
}

.gform-theme--framework .gfield--type-address .address_zip .gform-field-label--type-sub {
	--gf-ctrl-label-color-tertiary: #1a365d;
	--gf-ctrl-label-font-size-tertiary: 16px;
}

Country

The Country container uses .address_country and .ginput_address_country. Country always renders as a select.

.gform-theme--framework .gfield--type-address .address_country {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
}

.gform-theme--framework .gfield--type-address .address_country {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-border-color: #d2d5db;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-address .address_country {
	--gf-ctrl-font-size: 16px;
}

.gform-theme--framework .gfield--type-address .address_country .gform-field-label--type-sub {
	--gf-ctrl-label-color-tertiary: #1a365d;
	--gf-ctrl-label-font-size-tertiary: 16px;
}

Copy Values Option

When Copy Values is enabled, a checkbox appears above the address fields allowing values to be copied from another address field. The container uses .copy_values_option_container and the label uses .gform-field-label–type-inline.

.gform-theme--framework .gfield--type-address .copy_values_option_container {
	--gf-ctrl-label-color-secondary: #1a365d;
	--gf-ctrl-label-font-size-secondary: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-address .copy_values_option_container {
	--gf-ctrl-label-color-secondary: #112337;
}

Field Description

When a description is set, it appears above or below the field, depending on the form’s description placement.

.gform-theme--framework .gfield--type-address {
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
}

Validation Message

Validation messages appear when required or invalid address inputs occur. Messages use the classes .gfield_description, .validation_message, and .gfield_validation_message.

.gform-theme--framework .gfield--type-address .gfield_validation_message {
	--gf-ctrl-desc-color-error: #c02b0a;
	--gf-ctrl-desc-font-size-error: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-address .gfield_validation_message {
	--gf-ctrl-desc-color-error: #b91c1c;
}

Use Case Examples

Address Field With Accent Border

.gform-theme--framework .gfield--type-address {
	--gf-ctrl-border-color: #204ce5;
	--gf-ctrl-border-color-hover: #044ad3;
	--gf-ctrl-radius: 6px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-address {
	--gf-ctrl-border-color: #204ce5;
	--gf-ctrl-radius: 6px;
}

Styling Only Street Address Inputs

.gform-theme--framework .gfield--type-address .address_line_1,
.gform-theme--framework .gfield--type-address .address_line_2 {
	--gf-ctrl-bg-color: #f8fafc;
	--gf-ctrl-border-color: #cbd5e1;
}

Targeting a Specific Address Field By ID

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-bg-color: #f8fafc;
	--gf-ctrl-label-color-primary: #0f172a;
	--gf-ctrl-label-color-secondary: #334155;
	--gf-ctrl-desc-color: #64748b;
}

CSS API Reference

For full variable definitions, see the CSS API documentation.