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 Quantity field allows users to specify a quantity for a Product field. It supports Number (default), Drop Down, and Hidden. This documentation focuses on the Number configuration.
It renders input[type="number"] inside .ginput_container_number.
Each field includes an ID in the format field_{form_id}_{field_id}. Example: field_5_3.
Additional classes used: .gfield_price, .gfield_quantity, and .gfield_quantity_{form_id}_{product_field_id}.
For full variable definitions, see the CSS API documentation.
Container
The Quantity field uses .gfield--type-quantity and .ginput_container_number (to target the number field type).
/* example: number quantity field container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-quantity .ginput_container_number {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
}
/* example: number quantity field container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-quantity .ginput_container_number {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
}
/* example: specific number quantity field – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 .ginput_container_number {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
}
Input
The Quantity input is a native number field (input[type="number"]). Spin button styling varies by browser and is limited. Supported variables include --gf-ctrl-number-spin-btn-opacity, --gf-ctrl-number-spin-btn-appearance, --gf-ctrl-number-spin-btn-bg-position, --gf-ctrl-number-spin-btn-bg-size, and --gf-ctrl-number-spin-btn-width.
/* example: quantity field input – applies to all Orbital forms */
.gform-theme--framework .gfield--type-quantity {
--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-number-spin-btn-opacity: 1;
}
/* example: quantity field input – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-quantity {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-radius: 6px;
}
/* example: quantity input width */
.gform-theme--framework .gfield--type-quantity input[type="number"] {
max-width: 120px;
}
Range Instruction
Displayed when min/max values are set, using .instruction.
/* example: quantity range instruction – applies to all Orbital forms */
.gform-theme--framework .gfield--type-quantity .instruction {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
/* example: quantity range instruction – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-quantity .instruction {
--gf-ctrl-desc-font-size: 13px;
}
Field Label
/* example: quantity field label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-quantity {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
}
/* example: quantity field label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-quantity {
--gf-ctrl-label-color-primary: #112337;
--gf-ctrl-label-font-size-primary: 18px;
}
Field Description
/* example: quantity field description – applies to all Orbital forms */
.gform-theme--framework .gfield--type-quantity {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
Drop Down Configuration
When configured as Drop Down, the field uses .ginput_container_select and a native select element.
/* example: quantity field drop down – applies to all Orbital forms */
.gform-theme--framework .gfield--type-quantity .ginput_container_select {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-border-color: #d2d5db;
}
/* example: quantity drop down width */
.gform-theme--framework .gfield--type-quantity select {
max-width: 150px;
}
Use Case Examples
Quantity Field with Accent Border
/* example: quantity field with accent border – applies to all Orbital forms */
.gform-theme--framework .gfield--type-quantity {
--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-quantity {
--gf-ctrl-border-color: #204ce5;
--gf-ctrl-radius: 6px;
}
Targeting a Specific Quantity Field
/* example: specific quantity 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;
}
Hiding Number Spin Buttons
/* example: hide number spin buttons – applies to all Orbital forms */
.gform-theme--framework .gfield--type-quantity {
--gf-ctrl-number-spin-btn-opacity: 0;
}
CSS API Reference
For full variable definitions, see the separate CSS API documentation.
