List Field CSS Selectors

Container

(div) wraps the list field HTML table

  • example: List field container (div) – applies to all forms
body .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

  • body #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)

  • body .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
    body .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

  • body #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)

  • body .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
    body .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

  • body #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)

  • body .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
    body .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

  • body #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)

  • body .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

  • body .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

  • body #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)

  • body .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

  • body #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
    body .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

  • body #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)

  • body .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

    body .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

  • body #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)

  • body .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
    body .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

  • body #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)

  • body .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
    body .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

  • body #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)

  • body .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
    body .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

  • body #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)

  • body .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
    body #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

  • body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_list table.gfield_list tbody tr td.gfield_list_icons .delete_list_item {display:none;}