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 Time field allows users to enter a time using hours and minutes. It renders as a row of sub-containers inside .ginput_container.ginput_complex.gform-grid-row.
Sub-containers include:
.gfield_time_hour— hours input.gfield_time_minute— minutes input.gfield_time_ampm— AM/PM select (12-hour format only)
Sub-labels use .gform-field-label--type-sub, .hour_label, and .minute_label.
The field supports 12-hour format (with AM/PM) and 24-hour format (AM/PM hidden using .gf_hide_ampm).
For full variable definitions, see the CSS API documentation.
Main Field Container
The Time field uses .gfield--type-time on the field wrapper. Each field includes an ID in the format field_{form_id}_{field_id}.
Example: field_5_3 (form 5, field 3).
/* example: time field main container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-time {
--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-time-width: 140px;
}
/* example: time field main container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-time {
--gf-ctrl-label-color-primary: #112337;
--gf-field-time-width: 120px;
}
/* example: specific time field – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-radius: 6px;
}
Hours
Input Field
The hours input is a number input inside .gfield_time_hour.
/* example: hours input – applies to all Orbital forms */
.gform-theme--framework .gfield--type-time .gfield_time_hour {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-font-size: 16px;
}
/* example: hours input – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-time .gfield_time_hour {
--gf-ctrl-bg-color: #fafafa;
--gf-ctrl-font-size: 16px;
}
Sub-Label
The hours sub-label uses .gform-field-label--type-sub.hour_label.
/* example: hours sub-label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-time .gfield_time_hour .hour_label {
--gf-ctrl-label-color-tertiary: #1a365d;
--gf-ctrl-label-font-size-tertiary: 14px;
}
/* example: hours sub-label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-time .gfield_time_hour .hour_label {
--gf-ctrl-label-color-tertiary: #112337;
}
Minutes
Input Field
/* example: minutes input – applies to all Orbital forms */
.gform-theme--framework .gfield--type-time .gfield_time_minute {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-font-size: 16px;
}
/* example: minutes input – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-time .gfield_time_minute {
--gf-ctrl-bg-color: #fafafa;
--gf-ctrl-font-size: 16px;
}
Sub-Label
The minutes sub-label uses .gform-field-label--type-sub.minute_label.
/* example: minutes sub-label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-time .gfield_time_minute .minute_label {
--gf-ctrl-label-color-tertiary: #1a365d;
--gf-ctrl-label-font-size-tertiary: 14px;
}
/* example: minutes sub-label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-time .gfield_time_minute .minute_label {
--gf-ctrl-label-color-tertiary: #112337;
}
AM/PM
Container
The AM/PM container uses .gfield_time_ampm.ginput_container.ginput_container_time.gform-grid-col. It is hidden in a 24-hour format using .gf_hide_ampm.
Select
The AM/PM dropdown is a native select element.
/* example: AM/PM select – applies to all Orbital forms */
.gform-theme--framework .gfield--type-time .gfield_time_ampm {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-font-size: 16px;
}
/* example: AM/PM select – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-time .gfield_time_ampm {
--gf-ctrl-bg-color: #fafafa;
--gf-ctrl-border-color: #e5e7eb;
}
Field Description
When a description is set, it appears above or below the field.
/* example: time field description – applies to all Orbital forms */
.gform-theme--framework .gfield--type-time {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
Use Case Examples
Wider Time Inputs
/* example: wider time field – applies to all Orbital forms */
.gform-theme--framework .gfield--type-time {
--gf-field-time-width: 160px;
}
/* example: same – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-time {
--gf-field-time-width: 140px;
}
Styling Hours and Minutes Consistently
/* example: consistent hours/minutes styling – applies to all Orbital forms */
.gform-theme--framework .gfield--type-time .gfield_time_hour,
.gform-theme--framework .gfield--type-time .gfield_time_minute {
--gf-ctrl-bg-color: #f9fafb;
--gf-ctrl-border-color: #e5e7eb;
--gf-ctrl-radius: 6px;
}
Targeting a Specific Time Field by ID
/* example: specific time 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-time-width: 130px;
}
Hiding AM/PM Container
/* example: hide AM/PM container – applies to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-time .gfield_time_ampm {
display: none;
}
CSS API Reference
For full variable definitions, see the separate CSS API documentation.