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 File Upload field allows users to upload one or more files. Depending on the configuration, the field renders in one of two ways: Single File Upload displays a native input[type=”file”] element, and Multi-File Upload displays a drag-and-drop upload area.
When Enable Multi-File Upload is enabled, the field displays a drag-and-drop zone (.gform_drop_area) that includes instructions and a Select files button.
The native file input is generated by the browser and its appearance may vary depending on the browser, device, and operating system. The multi-file drop zone and preview list are styled using the Orbital theme framework and CSS API variables.
For full variable definitions, see the CSS API documentation.
Container
The File Upload field container uses the following classes:
- .gfield
- .gfield–type-fileupload
- .gfield–input-type-fileupload (used by fields such as Post Image)
- .ginput_container_fileupload
Each field container also includes a unique ID in the format field_{form_id}_{field_id} (e.g. field_5_3 for form 5, field 3).
css
.gform-theme--framework .gfield--type-fileupload {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-fileupload {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
}
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-radius: 6px;
}
Single File Upload
Single file uploads render a native input[type=”file”] element. Control styling is applied using the –gf-ctrl-file-* variables. The visible Choose File / Browse button is generated by the browser using the ::file-selector-button pseudo-element, and its appearance is controlled with the –gf-ctrl-file-btn-* variables.
Note: Because the file input and button are generated by the browser, full customization may be limited depending on the browser, device, and operating system.
css
.gform-theme--framework .gfield--type-fileupload {
--gf-ctrl-file-btn-bg-color: #374151;
--gf-ctrl-file-btn-bg-color-hover: #4b5563;
--gf-ctrl-file-btn-border-inline-end-color: #d2d5db;
--gf-ctrl-file-btn-color: rgba(255, 255, 255, 0.725);
--gf-ctrl-file-btn-font-size: 14px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-fileupload {
--gf-ctrl-file-btn-bg-color: #1f2937;
--gf-ctrl-file-btn-radius: 6px;
}
.gform-theme--framework .gfield--type-fileupload input[type="file"] {
max-width: 300px;
}
Multi-File Upload
Drop Area
When multi-file uploads are enabled, the field displays a drag-and-drop upload area (.gform_drop_area). The drop zone includes an upload icon, instruction text, and a file selection button.
Use the –gf-ctrl-file-zone-* variables to control drop zone styling.
css
.gform-theme--framework .gfield--type-fileupload {
--gf-ctrl-file-zone-height: auto;
--gf-ctrl-file-zone-radius: 8px;
--gf-ctrl-file-zone-border-style: dashed;
--gf-ctrl-file-zone-color: rgba(107, 114, 128, 0.725);
--gf-ctrl-file-zone-padding-y: 40px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-fileupload {
--gf-ctrl-file-zone-icon-color: #204ce5;
--gf-ctrl-file-zone-icon-font-size: 36px;
}
Upload Instruction Text
The text “Drop files here or” sits inside the drop zone (.gform_drop_area) and inherits its styling. The drop zone gets color from –gf-ctrl-file-zone-color and typography from –gf-ctrl-file-zone-font-weight, –gf-ctrl-file-zone-line-height, and the field control –gf-ctrl-font-size. Spacing to the button below is controlled by –gf-ctrl-file-zone-instructions-margin-y-end.
Set these variables on .gfield–type-fileupload (or .gform_drop_area); you do not need to target .gform_drop_instructions.
css
.gform-theme--framework .gfield--type-fileupload {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-fileupload {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
To adjust font weight or line height, use –gf-ctrl-file-zone-font-weight and –gf-ctrl-file-zone-line-height on the same selector.
File Selection Button
The Select files button uses the following classes:
- .gform_button_select_files
- .gform-theme-button
- .gform-theme-button–control
Button styling uses the standard button variables:
- –gf-ctrl-btn-bg-color-ctrl
- –gf-ctrl-btn-bg-color-hover-ctrl
- –gf-ctrl-btn-color-ctrl
css
.gform-theme--framework .gfield--type-fileupload {
--gf-ctrl-btn-bg-color-ctrl: #374151;
--gf-ctrl-btn-bg-color-hover-ctrl: #4b5563;
--gf-ctrl-btn-color-ctrl: #ffffff;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-fileupload {
--gf-ctrl-btn-bg-color-ctrl: #204ce5;
--gf-ctrl-btn-color-ctrl: #ffffff;
}
Upload Rules
When allowed extensions, max file size, or max files are configured, the rules appear in .gform_fileupload_rules with the class gfield_description.
Use the following variables to style the rules text:
- –gf-ctrl-desc-color
- –gf-ctrl-desc-font-size
css
.gform-theme--framework .gfield--type-fileupload .gform_fileupload_rules {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 13px;
margin-top: 8px;
}
Validation Message
Validation messages appear in .validation_message and .gfield_validation_message. Use –gf-ctrl-desc-color to control message color.
css
.gform-theme--framework .gfield--type-fileupload .validation_message {
--gf-ctrl-desc-color-error: #c02b0a;
--gf-ctrl-desc-font-size-error: 14px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-fileupload .validation_message {
--gf-ctrl-desc-color-error: #b91c1c;
}
Preview List
After files are selected, uploaded files appear in a preview list using .ginput_preview_list as the container and .ginput_preview for individual items. Preview styling uses the –gf-ctrl-file-prev-* variables.
css
.gform-theme--framework .gfield--type-fileupload .ginput_preview_list {
--gf-ctrl-file-prev-area-gap: 16px;
--gf-ctrl-file-prev-area-margin-y-start: 16px;
}
.gform-theme--framework .gfield--type-fileupload .gfield_fileupload_filename {
--gf-ctrl-file-prev-name-color: #1a365d;
--gf-ctrl-file-prev-name-line-height: 1.5;
}
.gform-theme--framework .gfield--type-fileupload {
--gf-ctrl-file-prog-bar-bg-color: #e5e7eb;
--gf-ctrl-file-prog-bar-bg-color-loading: #204ce5;
--gf-ctrl-file-prog-text-color: #6b7280;
}
Field Label
The field label uses the standard .gform-field-label. Use the following variables to control label styling:
- –gf-ctrl-label-color-primary
- –gf-ctrl-label-font-size-primary
css
.gform-theme--framework .gfield--type-fileupload {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
}
.gform-theme--framework#gform_wrapper_112 .gfield--type-fileupload {
--gf-ctrl-label-color-primary: #112337;
--gf-ctrl-label-font-size-primary: 18px;
}
Field Description
If a description is set, it appears above or below the field depending on the form’s description placement setting. Use the following variables to control description styling:
- –gf-ctrl-desc-color
- –gf-ctrl-desc-font-size
css
.gform-theme--framework .gfield--type-fileupload {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
Use Case Examples
File Upload With Accent Drop Zone Border
css
.gform-theme--framework .gfield--type-fileupload .gform_drop_area {
border-color: #204ce5;
}
.gform-theme--framework .gfield--type-fileupload {
--gf-ctrl-file-zone-color: #204ce5;
}
Targeting a Specific File Upload Field
css
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-file-zone-icon-color: #0f172a;
--gf-ctrl-label-color-primary: #0f172a;
--gf-ctrl-desc-color: #64748b;
}
Single File Upload With Custom Button Styling
css
.gform-theme--framework .gfield--type-fileupload {
--gf-ctrl-file-btn-bg-color: #204ce5;
--gf-ctrl-file-btn-bg-color-hover: #044ad3;
--gf-ctrl-file-btn-color: #ffffff;
--gf-ctrl-file-btn-radius: 6px;
}
CSS API Reference
For full variable definitions see the separate CSS API documentation.