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 Number field renders a single input that accepts numeric values.
When range limits (min/max) are set, an optional instruction message appears below the input indicating the allowed range.
The input may render as type=”number” or type=”text” depending on the number format. For example, currency and decimal-comma formats use type=”text” for compatibility.
Calculation-enabled number fields are read-only and use the .gform-text-input-reset class. For full variable definitions, see the separate CSS API documentation.
Container
The number field uses the standard field structure:
.gfield → .gfield--type-number
The field has an id attribute in the format field_{form_id}_{field_id} (e.g. field_5_3 for form 5, field 3).
/* example: container layout only – applies to all Orbital forms */
.gform-theme--framework .gfield--type-number {
--gf-ctrl-radius: 6px;
}
/* example: specific field container layout – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-radius: 60px;
}
Input
The number input inherits control styling from the framework.
Default to .gfield--type-number for variable overrides; these cascade to the input.
The input may be type="number" or type="text" depending on the field’s number format. Both receive the same framework styling.
/* example: number input styling – applies to all Orbital forms */
.gform-theme--framework .gfield--type-number {
--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;
}
/* example: number input styling – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-number {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-font-size: 16px;
}
/* example: input width – no variable; use direct property – applies to all Orbital forms */
.gform-theme--framework .gfield--type-number .ginput_container_number input {
max-width: 200px;
}
Note: When type="number" is used, browser-native spinners may appear. Their styling is limited by browser constraints. Some appearances can be adjusted via -webkit-appearance, and similar properties were supported.
Range Instructions
When min/max values are set in the field settings, an instruction message appears below the input (e.g., “Please enter a number from 1 to 100.”).
Use the field-level selector. No .ginput_container_* is needed.
/* example: range instruction styling – applies to all Orbital forms */
.gform-theme--framework .gfield--type-number .instruction {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
margin-top: 8px;
}
/* example: range instruction – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-number .instruction {
--gf-ctrl-desc-color: #4b5563;
--gf-ctrl-desc-font-size: 13px;
}
Field Label
Number fields use the standard .gform-field-label for the main label.
Override label variables on .gfield--type-number.
/* example: number field label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-number {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
}
/* example: number field label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-number {
--gf-ctrl-label-color-primary: #112337;
--gf-ctrl-label-font-size-primary: 18px;
}
Calculation-Enabled Fields
When a number field has a calculation, the input is read-only and uses the class gform-text-input-reset.
The framework resets the background and border for a less “input-like” appearance.
/* example: calculation field – no variable for font-weight; use direct property – applies to all Orbital forms */
.gform-theme--framework .gfield--type-number input.gform-text-input-reset {
font-weight: 600;
}
Use Case Examples
Number Field with Accent Border
/* example: number field with accent border – applies to all Orbital forms */
.gform-theme--framework .gfield--type-number {
--gf-ctrl-border-color: #204ce5;
--gf-ctrl-border-color-hover: #eff6ff;
--gf-ctrl-radius: 6px;
}
/* example: same – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-number {
--gf-ctrl-border-color: #204ce5;
--gf-ctrl-radius: 6px;
}
Targeting a Specific Number Field
/* example: specific number 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;
}
CSS API Reference
For full variable definitions, see the separate CSS API documentation.
