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 List field allows users to add and remove rows of data.
The field renders in two modes:
- Single Column — One input per row
- Multi-Column — Multiple labeled columns per row
Orbital uses a div-based grid layout instead of tables:
.gform-grid-row.gform-grid-col
Additional structure:
- Column headers use
.gfield_list_headerwith.gform-field-label.gfield_header_item - Each row uses
.gfield_list_group - Cells use
.gfield_list_group_item.gfield_list_cell
Each cell also includes a column-specific class: .gfield_list_{field_id}_cell{col}
Example: .gfield_list_3_cell1
Add and remove controls use:
.add_list_item.delete_list_item
These may render as buttons or icon links depending on field settings.
Cells may contain input, select, or textarea elements controlled by the gform_column_input filter.
For full variable definitions, see the CSS API documentation.
Main Field Container
The List field uses a fieldset wrapper with .gfield--type-list (or .gfield--input-type-list).
Each field includes an ID in the format: field_{form_id}_{field_id}
Example: field_5_3 (form 5, field 3).
/* example: list field main container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-list {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
/* example: list field main container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-list {
--gf-ctrl-label-color-primary: #112337;
--gf-ctrl-desc-font-size: 14px;
}
/* example: specific list field – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-radius: 6px;
}
Container
The List container uses .ginput_container_list.
When multi-column mode is enabled it also includes .ginput_container_list--columns.
This container wraps the entire list structure including headers, rows, and cells.
/* example: list container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-list .ginput_container_list {
--gf-ctrl-border-color: #e5e7eb;
}
/* example: list container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-list .ginput_container_list {
--gf-ctrl-border-color: #d2d5db;
}
Headers (Column Labels)
In multi-column mode the header row uses .gfield_list_header.gform-grid-row.
Each column label uses .gform-field-label.gfield_header_item.gform-grid-col.
The icons column uses .gfield_header_item--icons.
/* example: list column headers – applies to all Orbital forms */
.gform-theme--framework .gfield--type-list .gfield_list_header .gfield_header_item {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
}
/* example: list column headers – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-list .gfield_list_header .gfield_header_item {
--gf-ctrl-label-color-primary: #112337;
}
Columns
Individual columns can be targeted using .gfield_list_{field_id}_cell{col}.
Example: .gfield_list_3_cell1
/* example: column 1 in list field 3 – applies to all Orbital forms */
.gform-theme--framework .gfield--type-list .gfield_list_3_cell1 {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
}
/* example: column 2 in list field 3 – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-list .gfield_list_3_cell2 {
--gf-ctrl-border-color: #d2d5db;
}
Rows
Each list row uses .gfield_list_group.gform-grid-row.
Row classes:
.gfield_list_row_odd.gfield_list_row_even
Row spacing is controlled by --gf-field-gap-y.
Odd Rows
/* example: odd rows background – applies to all Orbital forms */
.gform-theme--framework .gfield--type-list .gfield_list_row_odd {
background-color: #f9fafb;
}
/* example: odd rows – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-list .gfield_list_row_odd {
background-color: #f3f4f6;
}
Even Rows
/* example: even rows background – applies to all Orbital forms */
.gform-theme--framework .gfield--type-list .gfield_list_row_even {
background-color: #ffffff;
}
/* example: even rows – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-list .gfield_list_row_even {
background-color: #fafafa;
}
All Rows
/* example: all rows – applies to all Orbital forms */
.gform-theme--framework .gfield--type-list .gfield_list_group {
border-bottom: 1px solid #e5e7eb;
}
/* example: row spacing – applies to all Orbital forms */
.gform-theme--framework .gfield--type-list .ginput_container_list {
--gf-field-gap-y: 16px;
}
Cells
Each cell uses .gfield_list_group_item.gfield_list_cell. Cells may contain input, select, or textarea elements. Use control variables on the cell scope to style inputs inside the cell.
/* example: list cell inputs – applies to all Orbital forms */
.gform-theme--framework .gfield--type-list .gfield_list_group_item {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-font-size: 16px;
}
/* example: list cell inputs – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-list .gfield_list_group_item {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-font-size: 16px;
}
Single-Column Data Labels
When the list layout is stacked (such as on smaller viewports), each cell displays its column label using a ::before pseudo-element. The label text is generated with content: attr(data-label).
css
/* example: single-column data labels – applies to all Orbital forms */
.gform-theme--framework .gfield--type-list .gfield_list_group_item::before {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 14px;
}
Icons Container
The add/remove icons are placed in .gfield_list_icons.gform-grid-col. Spacing and width are controlled using --gf-field-list-btns-gap and --gf-field-list-btns-width.
/* example: icons container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-list .gfield_list_icons {
--gf-field-list-btns-gap: 12px;
}
/* example: icons container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-list .gfield_list_icons {
--gf-field-list-btns-gap: 8px;
}
Add / Remove Icons
Add and remove controls use .add_list_item and .delete_list_item. These may render as buttons or links with images when custom icon URLs are used.
/* example: add/remove button size and radius – applies to all Orbital forms */
.gform-theme--framework .gfield--type-list {
--gf-field-list-btn-size: 20px;
--gf-field-list-btn-radius: 6px;
}
/* example: add/remove button styling – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-list {
--gf-field-list-btn-size: 18px;
--gf-field-list-btn-padding-y: 2px;
--gf-field-list-btn-padding-x: 2px;
}
Hiding Add or Remove Icons
When no CSS variable exists for visibility, use a direct property.
/* example: hide add row icon – applies to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-list .add_list_item {
display: none;
}
/* example: hide remove row icon – applies to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-list .delete_list_item {
display: none;
}
Field Description
When a description is set, it appears above or below the field.
/* example: list field description – applies to all Orbital forms */
.gform-theme--framework .gfield--type-list {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
Use Case Examples
Alternating Row Backgrounds
/* example: alternating row colors – applies to all Orbital forms */
.gform-theme--framework .gfield--type-list .gfield_list_row_odd {
background-color: #f9fafb;
}
.gform-theme--framework .gfield--type-list .gfield_list_row_even {
background-color: #ffffff;
}
Larger Add / Remove Buttons
/* example: larger add/remove buttons – applies to all Orbital forms */
.gform-theme--framework .gfield--type-list {
--gf-field-list-btn-size: 24px;
--gf-field-list-btn-radius: 6px;
}
/* example: same – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-list {
--gf-field-list-btn-size: 22px;
}
Styling a Specific Column
/* example: first column only – applies to all Orbital forms */
.gform-theme--framework .gfield--type-list .gfield_list_group_item.gfield_list_cell:first-child {
--gf-ctrl-bg-color: #f8fafc;
--gf-ctrl-border-color: #cbd5e1;
}
Targeting a Specific List Field by ID
/* example: specific list field – 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-field-list-btn-size: 18px;
}
CSS API Reference
For full variable definitions, see the separate CSS API documentation.