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 Total field displays the calculated order total. It renders as a readonly text input (.ginput_total) in Orbital, or a span.ginput_total when legacy markup is enabled.
Each field includes an ID in the format field_{form_id}_{field_id}. Example: field_5_3.
For full variable definitions, see the CSS API documentation.
Container
The Total field uses .gfield, .gfield--type-total, and .ginput_container_total.
/* example: total field container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-total {
padding: 8px 0;
}
/* example: total field container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-total {
padding: 12px 0;
}
/* example: specific total field – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
padding: 8px 12px;
}
Total Price
In Orbital, the total is a readonly input using .ginput_total and .gform-text-input-reset. It uses readonly control variables --gf-ctrl-readonly-color, --gf-ctrl-readonly-font-size, and --gf-ctrl-readonly-font-weight.
/* example: total price styling – applies to all Orbital forms */
.gform-theme--framework .gfield--type-total {
--gf-ctrl-readonly-color: #1a5f3a;
--gf-ctrl-readonly-font-size: 18px;
--gf-ctrl-readonly-font-weight: 600;
}
/* example: total price styling – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-total {
--gf-ctrl-readonly-color: #112337;
--gf-ctrl-readonly-font-size: 20px;
--gf-ctrl-readonly-font-weight: 600;
}
/* example: total price – applies to specific field */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-readonly-color: #059669;
--gf-ctrl-readonly-font-size: 16px;
}
Field Label
/* example: total field label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-total {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
}
/* example: total field label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-total {
--gf-ctrl-label-color-primary: #112337;
--gf-ctrl-label-font-size-primary: 18px;
}
Field Description
/* example: total field description – applies to all Orbital forms */
.gform-theme--framework .gfield--type-total {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
Use Case Examples
Accent-Styled Total
/* example: total with primary accent color – applies to all Orbital forms */
.gform-theme--framework .gfield--type-total {
--gf-ctrl-readonly-color: #2563eb;
--gf-ctrl-readonly-font-weight: 600;
}
/* example: same – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-total {
--gf-ctrl-readonly-color: #2563eb;
--gf-ctrl-readonly-font-size: 20px;
}
Targeting a Specific Total Field
/* example: specific total field by ID – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-readonly-color: #059669;
--gf-ctrl-readonly-font-size: 20px;
--gf-ctrl-label-color-primary: #0f172a;
}
CSS API Reference
For full variable definitions, see the separate CSS API documentation.
