Checkboxes Field CSS Selectors

List

Unordered list used to structure all of the individual list choices

  • example: standard checkbox list (ul) – applies to all forms
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox {border: 1px solid red}
    
  • example: standard checkbox list (ul) – applies just to form ID #1
    body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_checkbox {border: 1px solid red}
    
  • example: standard checkbox list (ul) – applies just to specific checkbox list (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 .gfield_checkbox {border: 1px solid red}
    

Items

Individual list choices

  • example: standard checkbox list item (li) – applies to all forms
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox li {border: 1px solid red}
    
  • example: standard checkbox list item (li) – applies just to form ID #1
    body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_checkbox li {border: 1px solid red}
    
  • example: standard checkbox list item (li) – applies just to specific checkbox list item (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 .gfield_checkbox li {border: 1px solid red}
    

Labels

  • example: standard checkbox choice label – applies to all forms
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox li label {border: 1px solid red}
    
  • example: standard checkbox choice label – applies just to form ID #1
    body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_checkbox li label {border: 1px solid red}
    
  • example: standard checkbox choice label – applies just to specific checkbox label (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 .gfield_checkbox li label {border: 1px solid red}
    

Inputs

Checkboxes inputs are elements generated by the browser not by Gravity Forms, for this reason they may look slightly different depending on the browser, device, and OS used. For the same reason, you may not be able to fully customize them easily only with CSS as you can do with other elements of the form.
  • example: standard checkbox input (checkbox) – applies to all forms
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox li input[type=checkbox] {border: 1px solid red}
    
  • example: standard checkbox input (checkbox) – applies just to form ID #1
    body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_checkbox li input[type=checkbox] {border: 1px solid red}
    
  • example: standard checkbox input (checkbox) – applies just to specific checkbox list inputs (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 .gfield_checkbox li input[type=checkbox] {border: 1px solid red}