### [Customizing the Style of Payment Fields](https://wpforms.com/docs/customizing-the-style-of-payment-fields/)

**Published:** June 4, 2024
**Author:** David Ozokoye

**Excerpt:** Learn how to customize the style of specific payment fields.

**Content:**

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](https://wpforms.com/docs/styling-your-forms/ "How to Customize WPForms with CSS Hero (Without HTML or CSS)").

### 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](http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/ "How to Easily Add Custom CSS to Your WordPress Site").

- [Payment Fields](#payment-fields)
    - [Single Item](#single-item)
    - [Multiple Items](#multiple-items)
    - [Checkbox Items](#checkbox-items)
    - [Dropdown Items](#dropdown-items)
    - [Stripe Credit Card](#stripe-credit-card)
    - [Square](#square)
    - [Authorize.Net](#authorize-net)
    - [Coupon](#coupon)
    - [Total](#total)

**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](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/).

---

### Payment Fields

#### Single Item

![Single Item field](https://wpforms.com/wp-content/uploads/2021/10/Single-Item-field.png "Single item field")

##### 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 field](https://wpforms.com/wp-content/uploads/2021/10/Multiple-Items-field.png "Multiple items field")

##### 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](https://wpforms.com/wp-content/uploads/2021/10/Checkbox-items.png "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 field](https://wpforms.com/wp-content/uploads/2021/10/Dropdown-items-field.png "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 field](https://wpforms.com/wp-content/uploads/2021/10/stripe-credit-card-field.png "Stripe credit card field")

##### 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 field](https://wpforms.com/wp-content/uploads/2021/10/square-field.png "Square card field")

##### 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 field](https://wpforms.com/wp-content/uploads/2021/10/Authorize.net-field.png "Authorize.net Payment field")

##### 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 field](https://wpforms.com/wp-content/uploads/2020/09/coupon-field.png)

##### 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 field](https://wpforms.com/wp-content/uploads/2021/10/Total-field.png "Total amount field")

##### 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](https://wpforms.com/docs/how-to-customize-the-submit-button/ "How to Customize the Submit Button").

**Categories:** Styling and Customization

---