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 Date field supports three input types:
- Date Picker — single text input with optional calendar icon
- Date Field — separate month, day, year inputs
- Date Dropdown — month, day, year select elements
The Date Picker uses .gfield--input-type-datepicker with .ginput_container_date.
The Date Field and Date Dropdown use .gfield_date_month, .gfield_date_day, and .gfield_date_year, or .gfield_date_dropdown_month, .gfield_date_dropdown_day, and .gfield_date_dropdown_year. All are inside .ginput_container.ginput_complex.gform-grid-row.
Sub-labels use .gform-field-label.gform-field-label--type-sub.
For full variable definitions, see the CSS API documentation.
Main Field Container
The Date field uses .gfield--type-date on the field wrapper. It also includes one of the following, depending on input type: .gfield--input-type-datepicker, .gfield--input-type-datefield, or .gfield--input-type-datedropdown.
Each field includes an ID in the format field_{form_id}_{field_id}. Example: field_5_3.
/* example: date field main container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-date {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
--gf-field-date-width: 168px;
}
/* example: date field main container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-date {
--gf-ctrl-label-color-primary: #112337;
--gf-field-date-width: 140px;
}
/* example: specific date field – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-radius: 6px;
}
Date Picker Input Type
Input Field
The Date Picker uses a text input inside .ginput_container_date.
/* example: date picker input – applies to all Orbital forms */
.gform-theme--framework .gfield--input-type-datepicker {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-border-color-hover: #9ca3af;
--gf-ctrl-font-size: 16px;
}
/* example: date picker input – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--input-type-datepicker {
--gf-ctrl-bg-color: #fafafa;
--gf-ctrl-border-color: #e5e7eb;
}
Icon (Default Calendar)
The default calendar icon is rendered using a ::after pseudo-element. The field includes .gfield--datepicker-default-icon.
/* example: date picker default icon – applies to all Orbital forms */
.gform-theme--framework .gfield--datepicker-default-icon {
--gf-field-date-icon-color: #4b5563;
--gf-field-date-icon-color-hover: #1f2937;
}
/* example: date picker default icon – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--datepicker-default-icon {
--gf-field-date-icon-color: #6b7280;
}
Icon (Custom Image)
When using a custom icon, Orbital renders an img element. The field includes .gfield--datepicker-custom-icon.
/* example: date picker custom icon – applies to all Orbital forms */
.gform-theme--framework .gfield--datepicker-custom-icon {
--gf-field-date-custom-icon-max-height: 20px;
--gf-field-date-custom-icon-max-width: 20px;
--gf-field-date-custom-icon-opacity: 0.8;
--gf-field-date-custom-icon-opacity-hover: 1;
}
/* example: date picker custom icon – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--datepicker-custom-icon {
--gf-field-date-custom-icon-opacity: 0.7;
}
Date Field Input Type
Month
Input Field
/* example: month input – applies to all Orbital forms */
.gform-theme--framework .gfield_date_month {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-font-size: 16px;
--gf-ctrl-radius: 6px;
}
/* example: month input – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield_date_month {
--gf-ctrl-bg-color: #fafafa;
--gf-ctrl-font-size: 16px;
}
Sub-Label
/* example: month sub-label – applies to all Orbital forms */
.gform-theme--framework .gfield_date_month {
--gf-ctrl-label-color-tertiary: #1a365d;
--gf-ctrl-label-font-size-tertiary: 14px;
}
/* example: month sub-label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield_date_month {
--gf-ctrl-label-color-tertiary: #112337;
}
Day
Input Field
/* example: day input – applies to all Orbital forms */
.gform-theme--framework .gfield_date_day {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-font-size: 16px;
}
/* example: day input – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield_date_day {
--gf-ctrl-bg-color: #fafafa;
--gf-ctrl-font-size: 16px;
}
Sub-Label
/* example: day sub-label – applies to all Orbital forms */
.gform-theme--framework .gfield_date_day {
--gf-ctrl-label-color-tertiary: #1a365d;
--gf-ctrl-label-font-size-tertiary: 14px;
}
/* example: day sub-label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield_date_day {
--gf-ctrl-label-color-tertiary: #112337;
}
Year
Input Field
/* example: year input – applies to all Orbital forms */
.gform-theme--framework .gfield_date_year {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-font-size: 16px;
}
/* example: year input – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield_date_year {
--gf-ctrl-bg-color: #fafafa;
--gf-ctrl-font-size: 16px;
}
Sub-Label
/* example: year sub-label – applies to all Orbital forms */
.gform-theme--framework .gfield_date_year {
--gf-ctrl-label-color-tertiary: #1a365d;
--gf-ctrl-label-font-size-tertiary: 14px;
}
/* example: year sub-label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield_date_year {
--gf-ctrl-label-color-tertiary: #112337;
}
Date Dropdown Input Type
The Date Dropdown uses select elements inside .gfield_date_dropdown_month, .gfield_date_dropdown_day, and .gfield_date_dropdown_year.
/* example: date dropdown containers – applies to all Orbital forms */
.gform-theme--framework .gfield_date_dropdown_month,
.gform-theme--framework .gfield_date_dropdown_day,
.gform-theme--framework .gfield_date_dropdown_year {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-border-color: #e5e7eb;
--gf-field-date-width: 168px;
}
/* example: date dropdown – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield_date_dropdown_month,
.gform-theme--framework#gform_wrapper_112 .gfield_date_dropdown_day,
.gform-theme--framework#gform_wrapper_112 .gfield_date_dropdown_year {
--gf-ctrl-border-color: #d2d5db;
}
Field Description
When a description is set, it appears above or below the field.
/* example: date field description – applies to all Orbital forms */
.gform-theme--framework .gfield--type-date {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
Use Case Examples
Wider Date Inputs
/* example: wider date field – applies to all Orbital forms */
.gform-theme--framework .gfield--type-date {
--gf-field-date-width: 200px;
}
/* example: same – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-date {
--gf-field-date-width: 180px;
}
Consistent Month, Day, Year Styling
/* example: consistent date field styling – applies to all Orbital forms */
.gform-theme--framework .gfield_date_month,
.gform-theme--framework .gfield_date_day,
.gform-theme--framework .gfield_date_year {
--gf-ctrl-bg-color: #f9fafb;
--gf-ctrl-border-color: #e5e7eb;
--gf-ctrl-radius: 6px;
}
Targeting a Specific Date Field by ID
/* example: specific date 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-field-date-width: 160px;
}
Date Picker With No Icon
When no icon is selected, the field includes .gfield--datepicker-no-icon.
/* example: date picker without icon – applies to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--datepicker-no-icon {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-border-color: #e5e7eb;
}
CSS API Reference
For full variable definitions, see the separate CSS API documentation.