ContainerCard IconsContainerAmerican ExpressDiscoverMastercardVisaCard Number InputExpirationMonthYearSecurity CodeContainerInputIcon
Container
example: credit card field container (div) – applies to all forms
1body .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
1body .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)
1body .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
1body .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
1body .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)
1body .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
1body .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
1body .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)
1body .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
1body .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
1body .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)
1body .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
1body .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
1body .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)
1body .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
1body .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
1body .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)
1body .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
1body .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
1body .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)
1body .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
1body .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
1body .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)
1body .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
1body .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
1body .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)
1body .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
1body .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
1body .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)
1body .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
1body .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
1body .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)
1body .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
1body .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
1body .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)
1body .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
1body .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
1body .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)
1body .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;}