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 Drop Down field renders a native HTML select element for single-choice selection. When “Enable Enhanced UI” is on, the field uses Chosen.js and displays a custom .chosen-container-single instead of the native select—target .chosen-container and its children for enhanced UI styling. The native select and option elements are browser-generated; their appearance varies by browser, device, and OS, and full customization via CSS alone may be limited.
Container
The drop down field uses the standard field structure: .gfield, .gfield--type-select (or .gfield--input-type-select for fields that use select as their input type). The field has an id attribute: field_{form_id}_{field_id} (e.g. field_5_3 for form 5, field 3). When Enhanced UI is enabled, the visual control is .chosen-container-single, which replaces the native select; the native select remains in the DOM for form submission but is visually hidden.
/* example: drop down field container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-select {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
}
/* example: drop down field container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-select {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
}
/* example: specific drop down field – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-radius: 6px;
}
Select Box (Native)
The native select element receives standard control styling from the framework (background, border, radius, font) plus select-specific variables for the dropdown icon. When Enhanced UI is on, the visible control is .chosen-single inside .chosen-container-single, not the native select; use the Enhanced UI section for that case.
Note: The select element is generated by the browser, not Gravity Forms. It may look different depending on the browser, device, and OS. You may not be able to fully customize it with CSS alone as with other form elements.
/* example: native select styling – applies to all Orbital forms */
.gform-theme--framework .gfield--type-select {
--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: native select styling – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-select {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-select-padding-x: 12px 32px;
}
/* example: select width – no variable; use direct property – applies to all Orbital forms */
.gform-theme--framework .gfield--type-select select {
max-width: 300px;
}
Items (Options)
To change the color of the selected value (the text shown when the dropdown is closed), style the select element. The individual option elements inside the dropdown list have limited CSS support; color and font properties may work in some browsers, but not others, and appearance varies by browser and OS.
Note: The select and option elements are generated by the browser, not Gravity Forms. They may look different depending on the browser, device, and OS. Styling the select for the selected value is reliable; styling option elements for the open list is limited.
/* example: selected value color – applies to all Orbital forms */
.gform-theme--framework .gfield--type-select select {
color: #1a365d;
}
/* example: selected value color – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-select select {
color: #112337;
}
Enhanced UI (Chosen)
When “Enable Enhanced UI” is on, the drop down uses Chosen.js. The visible control is .chosen-container-single, and the open dropdown is .chosen-drop with options in .chosen-results (li elements). Use these selectors instead of targeting the native select or .ginput_container_select when styling the visible UI.
Chosen single (visible control)
The .chosen-single element is the clickable trigger that shows the selected value. It receives standard control variables and select-specific icon variables.
/* example: Enhanced UI drop down trigger – applies to all Orbital forms */
.gform-theme--framework .gfield--type-select {
--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 drop down – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-select {
--gf-ctrl-radius: 6px;
--gf-ctrl-select-search-icon-size: 16px;
}
Chosen dropdown (open list)
The .chosen-drop is the open dropdown panel. Customize it with --gf-ctrl-select-dropdown-* variables.
/* example: Enhanced UI dropdown panel – applies to all Orbital forms */
.gform-theme--framework .gfield--type-select {
--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-select {
--gf-ctrl-select-dropdown-radius: 8px;
}
Chosen options (list items)
Options in the open dropdown are li elements inside .chosen-results. Use --gf-ctrl-select-dropdown-option-bg-color-hover and --gf-ctrl-select-dropdown-option-shadow-hover for hover/selected states.
/* example: Enhanced UI option hover – applies to all Orbital forms */
.gform-theme--framework .gfield--type-select {
--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-select {
--gf-ctrl-select-dropdown-option-bg-color-hover: #f0f9ff;
}
Chosen search (when search is enabled)
When the dropdown has many choices, Chosen may show a search input. Use --gf-ctrl-select-search-* variables on the field scope.
/* example: Enhanced UI search input – applies to all Orbital forms */
.gform-theme--framework .gfield--type-select {
--gf-ctrl-select-search-icon-size: 16px;
--gf-ctrl-select-search-padding-x: 12px 16px;
}
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-select.
/* example: drop down field label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-select {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
}
/* example: drop down field label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-select {
--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 select depending on the form’s description placement. Use --gf-ctrl-desc-color and --gf-ctrl-desc-font-size.
/* example: drop down field description – applies to all Orbital forms */
.gform-theme--framework .gfield--type-select {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
Use Case Examples
Drop down with accent border
/* example: drop down with accent border – applies to all Orbital forms */
.gform-theme--framework .gfield--type-select {
--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-select {
--gf-ctrl-border-color: #204ce5;
--gf-ctrl-radius: 6px;
}
Targeting a specific drop down field
/* example: specific drop down 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 dropdown styling – applies to all Orbital forms */
.gform-theme--framework .gfield--type-select {
--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 CSS API documentation.