Credit Card Field CSS Selectors

Container

example: credit card field container (div) – applies to all forms

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

example: credit card field container (div) – applies just to form ID #1

body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard {border: 1px solid red;}

example: credit card 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_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard {border: 1px solid red;}

Card Icons

Container

example: card icon container (div) – applies to all forms

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container {border: 1px solid red;}

example: card icon container (div) – applies just to form ID #1

body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container {border: 1px solid red;}

example: card icon 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_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .gform_card_icon_container {border: 1px solid red;}

American Express

example: card icon container (div) – applies to all forms

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_amex {border: 1px solid red;}

example: card icon container (div) – applies just to form ID #1

body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_amex {border: 1px solid red;}

example: card icon 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_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .gform_card_icon_container  .gform_card_icon_amex {border: 1px solid red;}

Discover

example: card icon container (div) – applies to all forms

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_discover {border: 1px solid red;}

example: card icon container (div) – applies just to form ID #1

body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_discover {border: 1px solid red;}

example: card icon 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_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .gform_card_icon_container  .gform_card_icon_discover {border: 1px solid red;}

Mastercard

example: card icon container (div) – applies to all forms

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_mastercard {border: 1px solid red;}

example: card icon container (div) – applies just to form ID #1

body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_mastercard {border: 1px solid red;}

example: card icon 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_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .gform_card_icon_container  .gform_card_icon_mastercard {border: 1px solid red;}

Visa

example: card icon container (div) – applies to all forms

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_visa {border: 1px solid red;}

example: card icon container (div) – applies just to form ID #1

body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_visa {border: 1px solid red;}

example: card icon 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_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .gform_card_icon_container  .gform_card_icon_visa {border: 1px solid red;}

Card Number Input

example: card icon container (input) – applies to all forms

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_full input {border: 1px solid red;}

example: card icon container (input) – applies just to form ID #1

body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_full input {border: 1px solid red;}

example: card icon container (input) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)

body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .ginput_full  input {border: 1px solid red;}

Expiration

example: card expiration container (span) – applies to all forms

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_expiration_container {border: 1px solid red;}

example: card expiration container (span) – applies just to form ID #1

body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_expiration_container {border: 1px solid red;}

example: card expiration container (span) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)

body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .ginput_expiration_container  {border: 1px solid red;}

Month

example: card expiration month (select) – applies to all forms

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_expiration_container .ginput_card_expiration_month {border: 1px solid red;}

example: card expiration month (select) – applies just to form ID #1

body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_expiration_container .ginput_card_expiration_month {border: 1px solid red;}

example: card expiration month (select) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)

body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .ginput_expiration_container .ginput_card_expiration_month {border: 1px solid red;}

Year

example: card expiration month (select) – applies to all forms

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_expiration_container .ginput_card_expiration_year {border: 1px solid red;}

example: card expiration month (select) – applies just to form ID #1

body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_expiration_container .ginput_card_expiration_year {border: 1px solid red;}

example: card expiration month (select) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)

body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .ginput_expiration_container .ginput_card_expiration_year {border: 1px solid red;}

Security Code

Container

example: card security code container (div) – applies to all forms

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_cardinfo_right {border: 1px solid red;}

example: card security code container (div) – applies just to form ID #1

body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_cardinfo_right {border: 1px solid red;}

example: card security code 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_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .ginput_cardinfo_right {border: 1px solid red;}

Input

example: card security code input (input) – applies to all forms

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_cardinfo_right .ginput_card_security_code {border: 1px solid red;}

example: card security code input (input) – applies just to form ID #1

body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_cardinfo_right .ginput_card_security_code {border: 1px solid red;}

example: card security code input (input) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)

body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .ginput_cardinfo_right .ginput_card_security_code {border: 1px solid red;}

Icon

example: card security code image (span) – applies to all forms

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_cardinfo_right .ginput_card_security_code_icon {border: 1px solid red;}

example: card security code image (span) – applies just to form ID #1

body .gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_creditcard .ginput_cardinfo_right .ginput_card_security_code_icon {border: 1px solid red;}

example: card security code image (span) – applies just to specific container (based on the unique parent element ID – replace “XX_X” with your actual element ID)

body .gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .ginput_cardinfo_right .ginput_card_security_code_icon {border: 1px solid red;}