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 Multi Select field renders a native HTML select[multiple] An element for selecting multiple options.
When Enable Enhanced UI is enabled, the field uses Chosen.js and replaces the native select with .chosen-container-multi, .chosen-choices, .chosen-drop, and .chosen-results. The native select remains in the DOM but is visually hidden.
Note: Native select and option elements are browser-controlled and may not be fully customizable with CSS.
For full variable definitions, see the CSS API documentation.
Container
The Multi Select field uses .gfield and .gfield--type-multiselect. Each field includes an ID in the format field_{form_id}_{field_id}. Example: field_5_3.
Select Box (Native)
The native select[multiple] uses control variables --gf-ctrl-multiselect-height, --gf-ctrl-multiselect-radius, --gf-ctrl-multiselect-line-height, and --gf-ctrl-multiselect-padding-y.
/* example: native multi select styling – applies to all Orbital forms */
.gform-theme--framework .gfield--type-multiselect {
--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;
--gf-ctrl-multiselect-height: 150px;
--gf-ctrl-multiselect-radius: 8px;
--gf-ctrl-multiselect-padding-y: 8px;
}
/* example: native multi select styling – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-multiselect {
--gf-ctrl-multiselect-height: 120px;
--gf-ctrl-multiselect-radius: 6px;
}
/* example: multi select width – applies to all Orbital forms */
.gform-theme--framework .gfield--type-multiselect {
max-width: 400px;
}
Items (Options)
Options are native option elements inside the select.
/* example: option styling – applies to all Orbital forms */
.gform-theme--framework .gfield--type-multiselect select option {
color: #1a365d;
}
/* example: option styling – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-multiselect select option {
color: #112337;
}
Enhanced UI (Chosen)
When Enhanced UI is enabled, style the Chosen elements instead of the native select.
Chosen Container
/* example: Enhanced UI container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-multiselect {
--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-focus: #204ce5;
--gf-ctrl-multiselect-radius: 8px;
}
/* example: Enhanced UI container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-multiselect {
--gf-ctrl-multiselect-radius: 6px;
}
Selected Items (Tags)
Selected items appear as tags inside .chosen-choices li.search-choice.
/* example: Enhanced UI selected item tags – applies to all Orbital forms */
.gform-theme--framework .gfield--type-multiselect {
--gf-ctrl-multiselect-selected-item-bg-color: #204ce5;
--gf-ctrl-multiselect-selected-item-color: #ffffff;
--gf-ctrl-multiselect-selected-item-radius: 20px;
--gf-ctrl-multiselect-selected-item-font-size: 14px;
--gf-ctrl-multiselect-selected-item-font-weight: 600;
--gf-ctrl-multiselect-selected-item-remove-icon-color: #ffffff;
--gf-ctrl-multiselect-close-icon-size: 12px;
}
/* example: Enhanced UI selected items – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-multiselect {
--gf-ctrl-multiselect-selected-item-bg-color: #112337;
--gf-ctrl-multiselect-selected-item-radius: 16px;
}
Chosen Dropdown
/* example: Enhanced UI dropdown panel – applies to all Orbital forms */
.gform-theme--framework .gfield--type-multiselect {
--gf-ctrl-select-dropdown-radius: 6px;
--gf-ctrl-select-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* example: Enhanced UI dropdown – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-multiselect {
--gf-ctrl-select-dropdown-radius: 8px;
}
Chosen Options
/* example: Enhanced UI option hover – applies to all Orbital forms */
.gform-theme--framework .gfield--type-multiselect {
--gf-ctrl-select-dropdown-option-bg-color-hover: #eef2ff;
--gf-ctrl-select-dropdown-option-shadow-hover: inset 3px 0 0 #204ce5;
}
/* example: Enhanced UI options – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-multiselect {
--gf-ctrl-select-dropdown-option-bg-color-hover: #f0f9ff;
}
Field Label
/* example: multi select field label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-multiselect {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
}
/* example: multi select field label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-multiselect {
--gf-ctrl-label-color-primary: #112337;
--gf-ctrl-label-font-size-primary: 18px;
}
Field Description
/* example: multi select field description – applies to all Orbital forms */
.gform-theme--framework .gfield--type-multiselect {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
Use Case Examples
Multi Select with Accent Border
/* example: multi select with accent border – applies to all Orbital forms */
.gform-theme--framework .gfield--type-multiselect {
--gf-ctrl-border-color: #204ce5;
--gf-ctrl-border-color-hover: #044ad3;
--gf-ctrl-multiselect-radius: 6px;
}
/* example: same – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-multiselect {
--gf-ctrl-border-color: #204ce5;
--gf-ctrl-multiselect-radius: 6px;
}
Targeting a Specific Multi Select Field
/* example: specific multi select field – 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;
}
Enhanced UI Selected Items Custom Styling
/* example: Enhanced UI selected item tags – applies to all Orbital forms */
.gform-theme--framework .gfield--type-multiselect {
--gf-ctrl-multiselect-selected-item-bg-color: #0f766e;
--gf-ctrl-multiselect-selected-item-color: #ffffff;
--gf-ctrl-multiselect-selected-item-radius: 24px;
}
Enhanced UI Dropdown with Custom Shadow
/* example: Enhanced UI dropdown styling – applies to all Orbital forms */
.gform-theme--framework .gfield--type-multiselect {
--gf-ctrl-select-dropdown-shadow: 0 8px 24px rgba(18, 25, 97, 0.12);
--gf-ctrl-select-dropdown-radius: 8px;
}
Native Multi Select Height Override
/* example: taller native multi select – applies to all Orbital forms */
.gform-theme--framework .gfield--type-multiselect {
--gf-ctrl-multiselect-height: 200px;
--gf-ctrl-multiselect-padding-y: 10px;
}
CSS API Reference
For full variable definitions see the separate CSS API documentation.