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 Image Choice field displays images as selectable choices in either a single-select (radio) or multi-select (checkbox) layout.
In Orbital, the field supports two appearance modes (Card, the default, and No Card) and two shape variants (Square, the default, and Circle).
The structure uses div.gfield_radio or div.gfield_checkbox as the list container, div.gchoice for each choice, and span.gfield-image-choice-wrapper-outer wrapping the image and choice content.
Form-level Image Choice Styles settings control appearance, shape, and size.
The underlying radio and checkbox inputs are browser-native elements, so full customization may be limited.
For full variable definitions, see the separate CSS API documentation.
Container
The Image Choice field uses the standard field structure:
- .gfield
- .gfield–type-image_choice
- .ginput_container_image_choice
- .ginput_container_radio (single select)
- .ginput_container_checkbox (multi select)
The field has an id attribute in the format field_{form_id}_{field_id} (e.g. field_5_3 for form 5, field 3).
Use .ginput_container_image_choice when targeting container layout or padding.
.gform-theme--framework .gfield--type-image_choice .ginput_container_image_choice {
background-color: #f9f9f9;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 12px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice .ginput_container_image_choice {
background-color: #f9f9f9;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 12px;
}
List
The .gfield_radio (single select) or .gfield_checkbox (multi select) element is the list container for image choices. Use –gf-field-img-choice-gap to control spacing between items.
.gform-theme--framework .gfield--type-image_choice .gfield_radio,
.gform-theme--framework .gfield--type-image_choice .gfield_checkbox {
--gf-field-img-choice-gap: 20px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice .gfield_radio,
.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice .gfield_checkbox {
--gf-field-img-choice-gap: 24px;
}
.gform-theme--framework#gform_wrapper_112 #field_112_4 .gfield_radio,
.gform-theme--framework#gform_wrapper_112 #field_112_4 .gfield_checkbox {
--gf-field-img-choice-gap: 16px;
}
Items (Choices)
Each choice is wrapped in div.gchoice. Choice size is controlled with –gf-field-img-choice-size.
Preset size variables:
- –gf-field-img-choice-size-sm
- –gf-field-img-choice-size-md
- –gf-field-img-choice-size-lg
.gform-theme--framework .gfield--type-image_choice {
--gf-field-img-choice-size: 50%;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice {
--gf-field-img-choice-size: 250px;
}
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-field-img-choice-size: 50%;
}
Image Wrapper
Images are wrapped in div.gfield-choice-image-wrapper.
Important variables:
- –gf-field-img-choice-aspect-ratio
- –gf-field-img-choice-margin-y-end
- –gf-field-img-choice-radius-square
- –gf-field-img-choice-radius-round
.gform-theme--framework .gfield--type-image_choice {
--gf-field-img-choice-aspect-ratio: 1/1;
--gf-field-img-choice-margin-y-end: 16px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice.gfield--image-choice-style-square {
--gf-field-img-choice-radius-square: 8px;
}
Image Placeholder (No Image)
When a choice has no image, the placeholder element appears as span.gfield-choice-image-no-image.
Card appearance variables:
- –gf-field-img-choice-card-placeholder-bg-color
- –gf-field-img-choice-card-placeholder-color
No-card appearance variables:
- –gf-field-img-choice-no-card-placeholder-bg-color
- –gf-field-img-choice-no-card-placeholder-color
.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card {
--gf-field-img-choice-card-placeholder-bg-color: rgba(0, 0, 0, 0.03);
--gf-field-img-choice-card-placeholder-color: rgba(0, 0, 0, 0.35);
--gf-field-img-choice-placeholder-icon-font-size: 48px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice.gfield--image-choice-appearance-no-card {
--gf-field-img-choice-no-card-placeholder-bg-color: #f5f5f5;
--gf-field-img-choice-no-card-placeholder-color: #6b7280;
}
Checked Indicator
When a choice is selected, a check icon appears.
Important variables:
- –gf-field-img-choice-check-ind-size
- –gf-field-img-choice-check-ind-icon-size
- –gf-field-img-choice-card-check-ind-bg-color (card appearance)
- –gf-field-img-choice-card-check-ind-icon-color (card appearance)
.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card {
--gf-field-img-choice-card-check-ind-bg-color: #204ce5;
--gf-field-img-choice-card-check-ind-icon-color: #ffffff;
--gf-field-img-choice-check-ind-size: 32px;
--gf-field-img-choice-check-ind-icon-size: 16px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice.gfield--image-choice-appearance-no-card {
--gf-field-img-choice-no-card-check-ind-bg-color: #1a365d;
--gf-field-img-choice-no-card-check-ind-icon-color: #ffffff;
}
Choice Labels
Choice labels appear inside span.gfield-image-choice-wrapper-inner.
Override:
- –gf-ctrl-color
- –gf-ctrl-label-font-size-secondary
.gform-theme--framework .gfield--type-image_choice {
--gf-ctrl-color: #1a365d;
--gf-ctrl-label-font-size-secondary: 16px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice {
--gf-ctrl-color: #112337;
--gf-ctrl-label-font-size-secondary: 14px;
}
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-color: #0f172a;
}
Inputs
The underlying inputs are input.gfield-choice-input with types radio or checkbox. These may be hidden when labels are shown.
.gform-theme--framework .gfield--type-image_choice {
--gf-ctrl-choice-size: 20px;
--gf-ctrl-checkbox-check-size: 14px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice {
--gf-ctrl-choice-size: 18px;
}
Card Appearance
When using Card appearance, the modifier class .gfield–image-choice-appearance-card is present.
.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card {
--gf-field-img-choice-shadow: 0 2px 8px rgba(0,0,0,0.08);
--gf-field-img-choice-shadow-hover: 0 4px 12px rgba(0,0,0,0.12);
--gf-field-img-choice-card-space: 16px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice.gfield--image-choice-appearance-card {
--gf-ctrl-bg-color: #fafafa;
--gf-ctrl-bg-color-hover: #f0f0f0;
}
No Card Appearance
.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-no-card {
--gf-field-img-choice-shadow: 0 1px 3px rgba(0,0,0,0.1);
--gf-field-img-choice-shadow-hover: 0 2px 6px rgba(0,0,0,0.15);
}
Shape Variants
Square
.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-style-square {
--gf-field-img-choice-radius-square: 12px;
}
Circle
.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice.gfield--image-choice-style-circle {
--gf-field-img-choice-radius-round: 50%;
}
Field Label
.gform-theme--framework .gfield--type-image_choice {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice {
--gf-ctrl-label-color-primary: #112337;
--gf-ctrl-label-font-size-primary: 18px;
}
Field Description
.gform-theme--framework .gfield--type-image_choice {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
Error State
.gform-theme--framework .gfield_error.gfield--type-image_choice {
--gf-ctrl-border-color-error: #c02b0a;
}
.gform-theme--framework#gform_wrapper_112 .gfield_error.gfield--type-image_choice {
--gf-ctrl-border-color-error: #c02b0a;
}
Choice Limit Message
.gform-theme--framework .gfield--type-image_choice .gfield_choice_limit_message {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
margin-bottom: 8px;
}
Use Case Examples
Custom Card Styling
.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card {
--gf-field-img-choice-shadow: 0 4px 12px rgba(0,0,0,0.1);
--gf-field-img-choice-shadow-hover: 0 6px 20px rgba(0,0,0,0.15);
--gf-field-img-choice-card-check-ind-bg-color: #059669;
}
Targeting a Specific Field
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-label-color-primary: #0f172a;
--gf-ctrl-color: #334155;
--gf-field-img-choice-size: 180px;
--gf-field-img-choice-gap: 16px;
}
CSS API Reference
For full variable definitions, see the separate CSS API documentation.