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 Option field allows users to select product options. It supports Drop Down, Radio Buttons, and Checkboxes. This documentation focuses on the Drop Down configuration.
It renders a native select element inside .ginput_container_select, or a Chosen.js UI when Enhanced UI is enabled.
Each field includes an ID in the format field_{form_id}_{field_id}. Example: field_5_4.
For full variable definitions, see the CSS API documentation.
Container
The Option field uses .gfield--type-option, .gfield--input-type-select (when dropdown), and .ginput_container_select.
/* example: option field container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-option {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
}
/* example: option field container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-option {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
}
/* example: specific option field – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
}
Drop Down
The native select element inherits standard control variables plus select-specific ones. Select styling is browser-controlled and limited.
/* example: option field drop down – applies to all Orbital forms */
.gform-theme--framework .gfield--type-option {
--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-select-icon-size: 12px;
}
/* example: option field drop down – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-option {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-select-padding-x: 12px 32px;
}
/* example: select width */
.gform-theme--framework .gfield--type-option select {
max-width: 300px;
}
Items (Options)
Options are native <option> elements. Styling support is limited and varies by browser.
/* example: option field items – applies to all Orbital forms */
.gform-theme--framework .gfield--type-option select option {
color: #1a365d;
}
/* example: option field items – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-option select option {
color: #112337;
}
Field Label
/* example: option field label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-option {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
}
/* example: option field label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-option {
--gf-ctrl-label-color-primary: #112337;
--gf-ctrl-label-font-size-primary: 18px;
}
Field Description
/* example: option field description – applies to all Orbital forms */
.gform-theme--framework .gfield--type-option {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
Enhanced UI (Chosen)
When enabled, the dropdown uses Chosen.js instead of the native select. Use .chosen-container-single (visible control), .chosen-drop (dropdown panel), and .chosen-results li (options) for styling.
/* example: Enhanced UI trigger */
.gform-theme--framework .gfield--type-option {
--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-select-icon-size: 10px;
}
/* example: Enhanced UI dropdown panel */
.gform-theme--framework .gfield--type-option {
--gf-ctrl-select-dropdown-border-color: #e5e7eb;
--gf-ctrl-select-dropdown-radius: 6px;
--gf-ctrl-select-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* example: Enhanced UI option hover */
.gform-theme--framework .gfield--type-option {
--gf-ctrl-select-dropdown-option-bg-color-hover: #eef2ff;
--gf-ctrl-select-dropdown-option-shadow-hover: inset 3px 0 0 #204ce5;
}
Use Case Examples
Option Field with Accent Border
/* example: option field with accent border – applies to all Orbital forms */
.gform-theme--framework .gfield--type-option {
--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-option {
--gf-ctrl-border-color: #204ce5;
--gf-ctrl-radius: 6px;
}
Targeting a Specific Option Field
/* example: specific option 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;
}
Enhanced UI Dropdown with Custom Shadow
/* example: Enhanced UI option field dropdown – applies to all Orbital forms */
.gform-theme--framework .gfield--type-option {
--gf-ctrl-select-dropdown-shadow: 0 8px 24px rgba(18, 25, 97, 0.12);
--gf-ctrl-select-dropdown-radius: 8px;
}
CSS API Reference
For full variable definitions, see the separate CSS API documentation.
