Radio Buttons Field CSS Selectors

List

Unordered list used to structure all of the individual list choices

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

Choices

Individual list choices

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

Labels

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

Inputs

Radio buttons 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 multiple-choice input (radio button) – applies to all forms
    body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio li input[type=radio] {border: 1px solid red}
    
  • example: standard checkbox input (radio button) – applies just to form ID #1
    body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_radio li input[type=radio] {border: 1px solid red}
    
  • example: standard checkbox input (cradio button) – applies just to specific multiple-choice 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_radio li input[type=radio] {border: 1px solid red}