Date Field CSS Selectors

Date Picker Input Type

Input Field

• example: date – input field (input) – applies to all forms

  body .gform_wrapper .gform_body .gform_fields .gfield .datepicker {border: 1px solid red}
  

• example: date – input field (input) – applies just to form ID #1

  body #gform_wrapper_1 .gform_body .gform_fields .gfield .datepicker {border: 1px solid red}
  

• example: date – input field (input) – applies just to specific date field input (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 .datepicker {border: 1px solid red}
  

Icon Image

• example: date – icon image (img) – applies to all forms

  body .gform_wrapper .gform_body .gform_fields .gfield .gfield_input_datepicker_icon {border: 1px solid red}
  

• example: date – icon image (img) – applies just to form ID #1

  body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_input_datepicker_icon {border: 1px solid red}
  

• example: date – icon image (img) – applies just to specific date field input (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_input_datepicker_icon {border: 1px solid red}
  

Date Field Input Type

Month

Container

Contains the month input field and sub-label

• example: date – month container (div) – applies to all forms

  body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month {border: 1px solid red}
  

• example: date – month container (div) – applies just to form ID #1

  body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_month {border: 1px solid red}
  

• example: date – month 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 .gfield_date_month {border: 1px solid red}
  

Input Field

• example: date – month input field (input) – applies to all forms

  body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month input {border: 1px solid red}
  

• example: date – month input field (input) – applies just to form ID #1

  body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_month input {border: 1px solid red}
  

• example: date – month input field (input) – applies just to specific form field (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_date_month input {border: 1px solid red}
  

Sub-Label

• example: date – month sub-label (label) – applies to all forms

  body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month label {color: red}
  

• example: date – month sub-label (label) – applies just to form ID #1

  body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_month label {color: red}
  

• example: date – month sub-label (label) – applies just to specific sub-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_date_month label {color: red}
  

Day

Container

Contains the day input field and sub-label

• example: date – day container (div) – applies to all forms

  body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day {border: 1px solid red}
  

• example: date – day container (div) – applies just to form ID #1

  body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_day {border: 1px solid red}
  

• example: date – day 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 .gfield_date_day {border: 1px solid red}
  

Input Field

• example: date – day input field (input) – applies to all forms

  body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day input {border: 1px solid red}
  

• example: date – day input field (input) – applies just to form ID #1

  body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_day input {border: 1px solid red}
  

• example: date – day input field (input) – applies just to specific form field (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_date_day input {border: 1px solid red}
  

Sub-Label

• example: date – day sub-label (label) – applies to all forms

  body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day label {color: red}
  

• example: date – sub-label (label) – applies just to form ID #1

  body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_day label {color: red}
  

• example: date – sub-label (label) – applies just to specific sub-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_date_day label {color: red}
  

Year

Container

Contains the month input field and sub-label

• example: date – year container (div) – applies to all forms

  body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year {border: 1px solid red}
  

• example: date – year container (div) – applies just to form ID #1

  body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_year {border: 1px solid red}
  

• example: date – year 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 .gfield_date_year {border: 1px solid red}
  

Input Field

• example: date – year input field (input) – applies to all forms

  body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year input {border: 1px solid red}
  

• example: date – year input field (input) – applies just to form ID #1

  body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_year input {border: 1px solid red}
  

• example: date – year input field (input) – applies just to specific form field (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_date_year input {border: 1px solid red}
  

Sub-Label

• example: date – year sub-label (label) – applies to all forms

  body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year label {color: red}
  

• example: date – year sub-label (label) – applies just to form ID #1

  body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_date_year label {color: red}
  

• example: date – year sub-label (label) – applies just to specific sub-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_date_year label {color: red}
  

The post Date Field CSS Selectors appeared first on Gravity Forms Documentation.