Would you like to style individual fields in your forms, without affecting other form fields? With the right CSS selector, you can change the styles of any form component to fit your needs.
This tutorial provides a list of selectors you’ll need to style payment fields in WPForms.
Note: The steps in this tutorial are advanced and require some knowledge of CSS. If you prefer not to use any code, you can see our guide on styling WPForms in the block editor.
Using the Code Snippets Below
Below is a list of the CSS selectors you’ll need to target specific fancy fields with your CSS code.
We’ve also included the default styles that WPForms automatically applies to those selectors. To customize any part of your form, you can copy a CSS snippet from this tutorial into your site, and then edit it as needed.
Note: Not sure how to add CSS to your site? Check out WPBeginner’s tutorial on adding custom CSS to your WordPress site.
Note: To learn more about using the code below, be sure to check our tutorial on customizing the style of standard fields and other form elements.
Payment Fields
Single Item
Single Item Padding
.wpforms-form .wpforms-field.wpforms-field-payment-single {
padding: 10px 0;
clear: both;
}
Single Item Label
.wpforms-form .wpforms-field.wpforms-field-payment-single .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Multiple Items
Multiple Items Padding
.wpforms-form .wpforms-field.wpforms-field-payment-multiple {
padding: 10px 0;
clear: both;
}
Multiple Items Label
.wpforms-form .wpforms-field.wpforms-field-payment-multiple .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Checkbox Items
Checkbox Items Padding
.wpforms-form .wpforms-field.wpforms-field-payment-checkbox {
padding: 10px 0;
clear: both;
}
Checkbox Items Label
.wpforms-form .wpforms-field.wpforms-field-payment-checkbox .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Checkbox Item Labels
.wpforms-form .wpforms-field.wpforms-field-payment-checkbox ul li .wpforms-field-label-inline {
display: inline;
vertical-align: baseline;
font-size: 16px;
font-weight: 400;
line-height: 1.3;
}
Dropdown Items
Dropdown Items Padding
.wpforms-form .wpforms-field.wpforms-field-payment-select {
padding: 10px 0;
clear: both;
}
Dropdown Items Label
.wpforms-form .wpforms-field.wpforms-field-payment-select .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Stripe Credit Card
Stripe Credit Card Padding
.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card {
padding: 10px 0;
clear: both;
}
Stripe Credit Card Label
.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Stripe Credit Card Sublabels
.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card .wpforms-field-sublabel {
display: block;
font-size: 13px;
float: none;
font-weight: 400;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Stripe Card Number Input Box
.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card .wpforms-field-stripe-credit-card-cardnumber {
background-color: #fff;
box-sizing: border-box;
border-radius: 2px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 1px solid #ccc;
padding: 8px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
}
Stripe Name on Card Input Box
.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card input[type=text] {
background-color: #fff;
box-sizing: border-box;
border-radius: 2px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 1px solid #ccc;
padding: 6px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
}
Square
Square Padding
.wpforms-form .wpforms-field.wpforms-field-square {
padding: 10px 0;
clear: both;
}
Square Label
.wpforms-form .wpforms-field.wpforms-field-square .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Square Sublabels
.wpforms-form .wpforms-field.wpforms-field-square .wpforms-field-sublabel {
display: block;
font-size: 13px;
float: none;
font-weight: 400;
line-height: 1.3;
margin: 4px 0 0;
padding: 0;
}
Square Card Details Input Box
.wpforms-form .wpforms-field.wpforms-field-square .sq-card-component {
position: relative;
height: inherit;
width: 100%;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 2px;
}
Square Name on Card Input Box
.wpforms-form .wpforms-field.wpforms-field-square .wpforms-field-square-cardname {
background-color: #fff;
box-sizing: border-box;
border-radius: 2px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 1px solid #ccc;
padding: 6px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
}
Authorize.Net
Authorize.Net Padding
.wpforms-form .wpforms-field.wpforms-field-authorize_net {
padding: 10px 0;
clear: both;
}
Authorize.Net Label
.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Authorize.Net Sublabels
.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-sublabel {
display: block;
font-size: 13px;
float: none;
font-weight: 400;
line-height: 1.3;
margin: 4px 0 0;
padding: 0;
}
Authorize.Net Card Number Input Box
.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-authorize_net-cardnumber {
background-color: #fff;
box-sizing: border-box;
border-radius: 2px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 1px solid #ccc;
padding: 6px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
}
Authorize.Net Card Month and Year
.wpforms-form .wpforms-field.wpforms-field-authorize_net select {
max-width: 100%;
text-transform: none;
white-space: nowrap;
}
Authorize.Net Security Code Input Box
.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-authorize_net-code .wpforms-field-authorize_net-cardcvc {
background-color: #fff;
box-sizing: border-box;
border-radius: 2px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 1px solid #ccc;
padding: 6px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
}
Coupon
Coupon Padding
.wpforms-form .wpforms-field.wpforms-field-payment-coupon {
padding: 10px 0;
clear: both;
}
Coupon Label
.wpforms-form .wpforms-field.wpforms-field-payment-coupon .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
Coupon Input Box
.wpforms-form .wpforms-field.wpforms-field-payment-coupon input {
background-color: #fff;
box-sizing: border-box;
border-radius: 2px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 1px solid #ccc;
padding: 6px 10px;
height: 120px;
width: 100%;
line-height: 1.3;
}
Coupon Apply Button
.wpforms-form .wpforms-field-payment-coupon-button {
font-size: var(--wpforms-label-size-sublabel-font-size, 14px);
font-weight: 500;
line-height: 100%;
background-color: var(--wpforms-label-sublabel-color, rgba(0,0,0,0.5));
box-shadow: none;
color: var(--wpforms-button-text-color, #fff);
border: none;
border-radius: var(--wpforms-button-border-radius, 3px);
padding: 0 var(--wpforms-button-size-padding-h, 15px);
white-space: nowrap;
margin-left: 15px;
height: var(--wpforms-field-size-input-height);
cursor: pointer;
position: relative;
transition: all 0.15s ease-in-out;
text-decoration: none
}
/* Apply button focus and hover styles */
.wpforms-form .wpforms-field-payment-coupon-button:hover,
.wpforms.form .wpforms-field-payment-coupon-button:active,
.wpforms.form .wpforms-field-payment-coupon-button:focus {
background-color: var(--wpforms-field-text-color, rgba(0,0,0,0.7));
border: none;
box-shadow: none;
color: var(--wpforms-button-text-color, #fff)
}
Total
Total Padding
.wpforms-form .wpforms-field.wpforms-field-payment-total {
padding: 10px 0;
clear: both;
}
Total Label
.wpforms-form .wpforms-field.wpforms-field-payment-total .wpforms-field-label {
display: block;
font-weight: 700;
font-size: 16px;
float: none;
line-height: 1.3;
margin: 0 0 4px 0;
padding: 0;
}
That’s it! Now you know how to use these selectors to apply custom CSS to payment fields on your forms.
Next, would you like even more customization options? Be sure to check out our tutorial on customizing the submit button.