Checkboxes 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 Checkboxes field renders a list of choices with a checkbox input for each.

In Orbital, the structure uses div.gfield_checkbox as the list container and div.gchoice for each item (not ul/li as in the legacy theme).

When “Enable Select All” is on, a toggle button appears below the choices.

Checkbox inputs are browser-native elements. Their appearance may vary across browsers, devices, and operating systems, and full customization via CSS alone may be limited.

Container

The checkbox field uses the standard field structure:

  • .gfield
  • .gfield–type-checkbox

The field has an id attribute in the format field_{form_id}_{field_id} (e.g. field_5_3 for form 5, field 3).

.gform-theme--framework .gfield--type-checkbox {
	background-color: #f9f9f9;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 12px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-checkbox {
	background-color: #f9f9f9;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 12px;
}

List

The .gfield_checkbox element is the list container for all checkbox choices. In Orbital, it is a div. The legacy theme used an unordered list (ul).

Use this selector to control spacing between choices.

.gform-theme--framework .gfield--type-checkbox .gfield_checkbox {
	--gf-field-choice-gap: 16px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-checkbox .gfield_checkbox {
	--gf-field-choice-gap: 20px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 .gfield_checkbox {
	--gf-field-choice-gap: 12px;
}

Items

Each checkbox choice is wrapped in div.gchoice.

The class gchoice_{form_id}{field_id}{choice_number} is also present for targeting individual choices when needed.

.gform-theme--framework .gfield--type-checkbox .gchoice {
	padding: 4px 0;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-checkbox .gchoice {
	margin-bottom: 8px;
}

Labels

Checkbox choice labels use:

  • .gform-field-label
  • .gform-field-label–type-inline

Override –gf-ctrl-label-color-secondary and –gf-ctrl-label-font-size-secondary on the field scope for choice label styling. These apply to labels within choices, not the main field label.

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

.gform-theme--framework#gform_wrapper_112 .gfield--type-checkbox {
	--gf-ctrl-label-color-secondary: #112337;
	--gf-ctrl-label-font-size-secondary: 18px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-label-color-secondary: #0f172a;
}

Inputs

Checkbox inputs use input.gfield-choice-input with type=”checkbox”. They are browser-native elements. Appearance varies by browser, device, and operating system, and full CSS customization is limited.

Use –gf-ctrl-choice-size and –gf-ctrl-checkbox-check-size with literal px values.

.gform-theme--framework .gfield--type-checkbox {
	--gf-ctrl-choice-size: 20px;
	--gf-ctrl-checkbox-check-size: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-checkbox {
	--gf-ctrl-choice-size: 18px;
	--gf-ctrl-checkbox-check-size: 12px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-choice-size: 20px;
	--gf-ctrl-checkbox-check-size: 16px;
}

Note: Checkbox inputs are generated by the browser, not Gravity Forms. They may look different depending on the browser, device, and operating system. You may not be able to fully customize them with CSS alone as with other form elements.

Field Label

The main field label uses the standard .gform-field-label. Override –gf-ctrl-label-color-primary and –gf-ctrl-label-font-size-primary on .gfield–type-checkbox.

.gform-theme--framework .gfield--type-checkbox {
	--gf-ctrl-label-color-primary: #1a365d;
	--gf-ctrl-label-font-size-primary: 16px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-checkbox {
	--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 choices, depending on the form’s description placement.

Use –gf-ctrl-desc-color and –gf-ctrl-desc-font-size.

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

Select All / Deselect All Button

When “Enable Select All” is on, a toggle button appears in .gfield-choice-toggle-all with the class gfield_choice_all_toggle. The parent list receives .gfield_choice–select_all_enabled. The button inherits framework button styling and sizing.

css

.gform-theme--framework .gfield--type-checkbox .gfield-choice-toggle-all {
	margin-top: 12px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-checkbox .gfield_choice_all_toggle {
	--gf-ctrl-btn-bg-color-primary: #204ce5;
	--gf-ctrl-btn-color-primary: #ffffff;
}

Use Case Examples

Checkbox List with Increased Spacing

.gform-theme--framework .gfield--type-checkbox .gfield_checkbox {
	--gf-field-choice-gap: 24px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-checkbox .gfield_checkbox {
	--gf-field-choice-gap: 24px;
}

Larger Checkbox Inputs

.gform-theme--framework .gfield--type-checkbox {
	--gf-ctrl-choice-size: 24px;
	--gf-ctrl-checkbox-check-size: 16px;
}

Targeting a Specific Checkbox Field

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-label-color-primary: #0f172a;
	--gf-ctrl-label-color-secondary: #334155;
	--gf-field-choice-gap: 12px;
}

CSS API Reference

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