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.
Product fields use .gfield--type-product (base) and .gfield--input-type-* (specific type). Always combine both to target a specific product type.
For full variable definitions, see the CSS API documentation.
Targeting Product Fields
General (all product fields): .gfield--type-product
Specific (recommended):
.gfield--type-product.gfield--input-type-singleproduct.gfield--type-product.gfield--input-type-select.gfield--type-product.gfield--input-type-radio
Field ID: #field_{form_id}_{field_id}
Quick Examples by Type
Single Product
/* example: single product field – applies to all Orbital forms */
.gform-theme--framework .gfield--type-product.gfield--input-type-singleproduct {
outline: 1px dashed #94a3b8;
}
Drop Down (Product)
/* example: product dropdown – applies to all Orbital forms */
.gform-theme--framework .gfield--type-product.gfield--input-type-select {
outline: 1px dashed #94a3b8;
}
Radio Buttons (Product)
/* example: product radio buttons – applies to all Orbital forms */
.gform-theme--framework .gfield--type-product.gfield--input-type-radio {
outline: 1px dashed #94a3b8;
}
User Defined Price
/* example: user defined price – applies to all Orbital forms */
.gform-theme--framework .gfield--type-price .ginput_container_product_price .ginput_amount {
outline: 1px dashed #94a3b8;
}
Calculation Product
/* example: calculation product – applies to all Orbital forms */
.gform-theme--framework .gfield--type-product.gfield--input-type-calculation {
outline: 1px dashed #94a3b8;
}
Single Product (Detailed)
Use the selector .gfield--type-product.gfield--input-type-singleproduct.
Container
/* example: product field container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-product.gfield--input-type-singleproduct {
padding: 8px 0;
}
Price Label
/* example: product price label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-product .ginput_product_price_label {
--gf-local-color: #6b7280;
--gf-local-font-size: 14px;
}
Price
/* example: product price styling – applies to all Orbital forms */
.gform-theme--framework .gfield--type-product.gfield--input-type-singleproduct {
--gf-field-prod-price-color: #1a5f3a;
--gf-ctrl-readonly-font-weight: 600;
}
Quantity Input
/* example: product quantity input – applies to all Orbital forms */
.gform-theme--framework .gfield--type-product.gfield--input-type-singleproduct {
--gf-field-prod-quant-width: 120px;
}
Quantity Label
/* example: product quantity label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-product .ginput_quantity_label {
--gf-local-color: #6b7280;
--gf-local-font-size: 14px;
}
Field Label
/* example: product field label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-product.gfield--input-type-singleproduct {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
}
Field Description
/* example: product field description – applies to all Orbital forms */
.gform-theme--framework .gfield--type-product.gfield--input-type-singleproduct {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
Use Case Examples
Accent Price
/* example: product price with primary accent – applies to all Orbital forms */
.gform-theme--framework .gfield--type-product.gfield--input-type-singleproduct {
--gf-field-prod-price-color: #2563eb;
--gf-ctrl-readonly-color: #2563eb;
}
Specific Field Targeting
/* example: specific product field by ID – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-field-prod-price-color: #059669;
}
Quantity Accent Border
/* example: product quantity with accent border – applies to all Orbital forms */
.gform-theme--framework .gfield--type-product.gfield--input-type-singleproduct {
--gf-ctrl-border-color: #204ce5;
--gf-ctrl-border-color-hover: #044ad3;
--gf-ctrl-radius: 6px;
}
CSS API Reference
For full variable definitions, see the separate CSS API documentation.
