List Field CSS Selectors

List Field CSS Selectors

ContainerTable ContainerHeaders (Labels)ColumnsRowsOdd RowsEven RowsAll rowsCellsIcons ContainerAdd/Remove Icons

Container
(div) wraps the list field HTML table

example: List field container (div) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_listbody .gform_wrapper .gform_body .gform_fields .gfield .ginput_list {border: 1px solid red}

example: advanced field container (div) – applies just to form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list {border: 1px solid red}

example: advanced field container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_list {border: 1px solid red}

Table Container
List field HTML table structure that contains the list field inputs

example: List field table – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_listbody .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list {border: 1px solid red}

example: advanced field container (div) – applies just to form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list table.gfield_list {border: 1px solid red}

example: advanced field container (div) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_list table.gfield_list {border: 1px solid red}

Headers (Labels)
Targets the individual HTML table headers (labels)

example: odd-numbered column (colgroup) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield div.ginput_container_list table.gfield_list thead th {color: red}

example: odd-numbered column (colgroup) – applies just to form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield div.ginput_container_list table.gfield_list thead th {color:red}

example: odd-numbered column (colgroup) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield div.ginput_container_list table.gfield_list thead th {color: red}

Columns
Targets the individual HTML table columns (colgroups) – useful for specifying sizes or creating alternating-color column styles

example: odd-numbered column (colgroup) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list colgroup col.gfield_list_col_odd {border: 1px solid red}

example: odd-numbered column (colgroup) – applies just to form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list table.gfield_list colgroup col.gfield_list_col_odd {border: 1px solid red}

example: odd-numbered column (colgroup) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield ginput_list table.gfield_list colgroup col.gfield_list_col_odd {border: 1px solid red}

example: even-numbered column (colgroup) – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list colgroup col.gfield_list_col_even {border: 1px solid red}

example: even-numbered column (colgroup) – applies just to form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list table.gfield_list colgroup col.gfield_list_col_even {border: 1px solid red}

example: even-numbered column (colgroup) – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield ginput_list table.gfield_list colgroup col.gfield_list_col_even {border: 1px solid red}

example: targeting a specific column (colgroup) by ID – applies just to list 2, column number 1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list table.gfield_list colgroup col#gfield_list_2_col1 {border: 1px solid red}

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

example: odd-numbered row – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr.gfield_list_row_odd {border: 1px solid red}

example: odd-numbered row – applies just to form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr.gfield_list_row_odd {border: 1px solid red}

example: odd-numbered row – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield ginput_list table.gfield_list tbody tr.gfield_list_row_odd {border: 1px solid red}

Even Rows

example: even-numbered row – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr.gfield_list_row_even {border: 1px solid red}

example: even-numbered row – applies just to form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr.gfield_list_row_even {border: 1px solid red}

example: even-numbered row – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield ginput_list table.gfield_list tbody tr.gfield_list_row_even {border: 1px solid red}

All rows
If you want to target all rows with the same CSS you can use the following:

example: applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr.gfield_list_group {border: 1px solid red}

example: applies just to form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr.gfield_list_group {border: 1px solid red}

example: applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield ginput_list table.gfield_list tbody tr.gfield_list_group {border: 1px solid red}

Cells
Targets the list field HTML table cells

example: list table cell – applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr td.gfield_list_cell {border: 1px solid red}

example: list table cell – applies just to form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr td.gfield_list_cell {border: 1px solid red}

example: list table cell – applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield ginput_list table.gfield_list tbody tr td.gfield_list_cell {border: 1px solid red}

Icons Container
Targets the table cell that contains the icons to add or remove rows.

example: applies to all forms
1body .gform_wrapper .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr td.gfield_list_icons {border: 1px solid red}

example: applies just to form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr td.gfield_list_icons {border: 1px solid red}

example: applies just to specific container (based on the unique parent element ID – replace 「XX_X」 with your actual element ID)
1body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield ginput_list table.gfield_list tbody tr td.gfield_list_icons {border: 1px solid red}

Add/Remove Icons
Targets the icons to add or remove rows.

example: hide add row icons in form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr td.gfield_list_icons .add_list_item {display:none;}

example: hide remove row icons in form ID #1
1body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr td.gfield_list_icons .delete_list_item {display:none;}

發表回覆

您的電子郵箱地址不會被公開。 必填項已用 * 標註