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 Post Image field allows users to upload an image with optional metadata: Alternative Text, Title, Caption, and Description.
It renders a file input (input[type="file"]) and text inputs (input[type="text"]) for metadata. The structure uses .ginput_container_post_image.
Sub-containers include .ginput_post_image_alt, .ginput_post_image_title, .ginput_post_image_caption, and .ginput_post_image_description. Accepted file extensions are shown in .gform_fileupload_rules.
For full variable definitions, see the CSS API documentation.
Container
The Post Image field uses .gfield, .gfield--type-post_image, and .ginput_container_post_image. Each field includes an ID in the format field_{form_id}_{field_id}. Example: field_5_3.
File Input
The file input uses input[type="file"]. Note: native file inputs have limited styling.
/* example: Post Image file input styling – applies to all Orbital forms */
.gform-theme--framework .gfield--type-post_image {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-border-color-hover: #b8bcc4;
--gf-ctrl-font-size: 16px;
}
/* example: Post Image file input – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-post_image {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-font-size: 14px;
}
/* example: file input layout */
.gform-theme--framework .gfield--type-post_image input[type="file"] {
max-width: 100%;
}
Metadata Text Inputs
Metadata inputs use input[type="text"].
/* example: Post Image metadata inputs – applies to all Orbital forms */
.gform-theme--framework .gfield--type-post_image input[type="text"] {
--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: metadata inputs – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-post_image input[type="text"] {
--gf-ctrl-font-size: 14px;
--gf-ctrl-radius: 6px;
}
Sub-Labels
Sub-labels use .gform-field-label--type-sub.
/* example: Post Image sub-labels – applies to all Orbital forms */
.gform-theme--framework .gform-field-label--type-sub {
--gf-ctrl-label-color-tertiary: #1a365d;
--gf-ctrl-label-font-size-tertiary: 14px;
}
/* example: sub-labels – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform-field-label--type-sub {
--gf-ctrl-label-color-tertiary: #112337;
--gf-ctrl-label-font-size-tertiary: 15px;
}
Accepted Extensions Message
/* example: accepted extensions message – applies to all Orbital forms */
.gform-theme--framework .gform_fileupload_rules {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 13px;
}
/* example: accepted extensions – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gform_fileupload_rules {
--gf-ctrl-desc-font-size: 12px;
}
Field Label
/* example: Post Image field label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-post_image {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
}
/* example: Post Image field label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-post_image {
--gf-ctrl-label-color-primary: #112337;
--gf-ctrl-label-font-size-primary: 18px;
}
Field Description
/* example: Post Image field description – applies to all Orbital forms */
.gform-theme--framework .gfield--type-post_image {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
Use Case Examples
Post Image Container with Accent Border
/* example: Post Image field with accent border – applies to all Orbital forms */
.gform-theme--framework .gfield--type-post_image {
--gf-ctrl-border-color: #204ce5;
--gf-ctrl-radius: 6px;
}
/* example: same – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-post_image {
--gf-ctrl-border-color: #044ad3;
}
Metadata Inputs with Custom Styling
/* example: metadata inputs accent – applies to all Orbital forms */
.gform-theme--framework .ginput_post_image_alt input,
.gform-theme--framework .ginput_post_image_title input,
.gform-theme--framework .ginput_post_image_caption input,
.gform-theme--framework .ginput_post_image_description input {
--gf-ctrl-border-color: #f9f9f9;
--gf-ctrl-border-color-focus: #204ce5;
--gf-ctrl-radius: 6px;
}
/* example: same – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .ginput_container_post_image input[type="text"] {
--gf-ctrl-bg-color: #f8fafc;
}
Targeting a Specific Post Image Field
/* example: specific Post Image field – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-label-color-primary: #0f172a;
--gf-ctrl-desc-color: #64748b;
}
.gform-theme--framework#gform_wrapper_112 #field_112_4 .ginput_container_post_image {
--gf-ctrl-border-color: #e2e8f0;
padding: 16px;
}
CSS API Reference
For full variable definitions, see the separate CSS API documentation.