List Field CSS Selectors

Container

.gform_wrapper .ginput_container_list {border: 1px solid red}

#gform_wrapper_1 .ginput_container_list {border: 1px solid red}

Applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)

#field_XX_X.gfield .ginput_container_list {border: 1px solid red}

Targets the individual headers (labels)

.gform_wrapper .gfield_list_header.gform-grid-row {color: red}

#gform_wrapper_1 .gfield_list_header.gform-grid-row {color: red}

Applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)

#field_XX_X.gfield .gfield_list_header.gform-grid-row {color: red}

Targets the individual HTML columns

Applies to column 1 in field ID 1 in all forms
.gfield_list_X_cell_Y (where X is your field ID and Y is your column number)

.gform_wrapper .gfield_list_1_cell1 {border: 2px solid #333333;}

Applies to column 1 and field ID 1 in form ID #1
.gfield_list_X_cell_Y (where X is your field ID and Y is your column number)

#gform_wrapper_1 .gfield_list_1_cell1 {border: 2px solid #333333;}

Targets the individual HTML list rows – useful for specifying sizes or creating alternating-color row styles

.gform_wrapper .gfield_list_group.gform-grid-row.gfield_list_row_odd { background: #eeeeee; }

#gform_wrapper_1 .gfield_list_group.gform-grid-row.gfield_list_row_odd { background: #eeeeee; }

Applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)

#field_XX_X .gfield_list_row_odd.gfield_list_group.gform-grid-row { background: #eeeeee; }

.gform_wrapper .gfield_list_group.gform-grid-row.gfield_list_row_even { background: #eeeeee; }

#gform_wrapper_1 .gfield_list_group.gform-grid-row.gfield_list_row_even { background: #eeeeee; }

Applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)

#field_XX_X .gfield_list_row_even.gfield_list_group.gform-grid-row { background: #eeeeee; }

.gform_wrapper .gfield_list_group.gform-grid-row { background: #eeeeee; }

#gform_wrapper_1 .gfield_list_group.gform-grid-row { background: #eeeeee; }

Applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)

#field_XX_X .gfield_list_group.gform-grid-row { background: #eeeeee; }

.gform_wrapper .gfield_list_group_item.gfield_list_cell { border: 2px solid #eeeeee; }

#gform_wrapper_1 .gfield_list_group_item.gfield_list_cell { border: 2px solid #eeeeee; }

Applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)

#field_XX_X .gfield_list_group_item.gfield_list_cell { border: 2px solid #eeeeee; }

Targets the row that contains the icons to add or remove rows.

.gform_wrapper .gfield_list_icons.gform-grid-col {border: 1px solid red}

example: Applies to all forms

#gform_wrapper_1 .gfield_list_icons.gform-grid-col {border:

example: Applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)

#field_XX_X .gfield_list_icons.gform-grid-col {border: 1px solid red}

Targets the icons to add or remove rows.

#gform_wrapper_1 .gfield_list_icons .add_list_item {display:none} {display:none;}

#gform_wrapper_1 .gfield_list_icons .remove_list_item {display:none} {display:none;}