### [How to Customize the Authorize.net Credit Card Field](https://wpforms.com/developers/how-to-customize-the-authorize-net-credit-card-field/)

**Published:** July 16, 2021
**Author:** Editorial Team

**Excerpt:** This article will show you how to use CSS to get your Authorize.net field to display on a single line. 

**Content:**

## Overview

Would you like to customize the **Authorize.net** field? You can easily change the look of this field. For example, we’re going to style the credit card field to be on a single line. In order to do this, we’ll need to use a little CSS to have each field display inline.

## Setup

You’ll first need to create a form and add the **Authorize.net** field to your form.

If you need any help in creating an Authorize.net form, [please see this documentation](https://wpforms.com/docs/how-to-install-and-use-the-authorize-net-addon-with-wpforms/ "How to Install and Use the Authorize.Net Addon with WPForms").

![create a form and add the Authorize.net field](https://wpforms.com/wp-content/uploads/2021/07/wpforms-add-authorize.net-field.jpg)

The **Card Number**, **Expiration Date**, and **Security Code** fields have default styling that sets the **Card Number** on one line and the rest will fall onto the next line.

![default styling for the Authorize.net credit card field](https://wpforms.com/wp-content/uploads/2021/07/wpforms-authorize-default-styling.jpg)

## Adding the CSS to customize the Authorize.net field

Now it’s time to add the CSS so that we can get all three fields on one line.

If you need help in adding CSS to your site, [please see this tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "How to Add Custom CSS Styles for WPForms").

```

.wpforms-field-authorize_net .wpforms-field-row {
    float: left !important;
    width: 45% !important;
}

.wpforms-field-authorize_net .wpforms-field-row:nth-of-type(2) {
    margin-left: 3%;
}

.wpforms-field-authorize_net-expiration {
    width: 50% !important;
    float: left !important;
    max-width: 50% !important;
}

.wpforms-field-authorize_net-expiration div {
    max-width: 40% !important;
    float: left !important;
    width: 40% !important;
}

.wpforms-field-authorize_net-expiration span {
    float: left !important;
    display: inline-block;
    width: 8% !important;
    max-width: 8% !important;
    margin: 0 5% 0 5% !important;
}

.wpforms-field-authorize_net-code {
    float: right !important;
    max-width: 45% !important;
}
```

The CSS above would style all **Authorize.net Credit Card** fields the same way.

With this CSS we’ve now customized the **Authorize.net** field to have all fields on a single line.

![customize the authorize.net field using CSS to display these fields on a single line](https://wpforms.com/wp-content/uploads/2022/07/wpforms-authorize-net-field-custom-css.jpg)

And that’s all you need to customize the **Authorize.net** form field. Would you like to also send through the address with the Authorize.net payment? Check out our tutorial on [How to Send an Address Through to Authorize.net Payments](https://wpforms.com/developers/how-to-send-an-address-through-to-authorize-net-payments/ "How to Send an Address Through to Authorize.net Payments").

## FAQ

#### Q: How can I put this back to single lines on mobile devices?

**A:** For smaller screens, you’ll want all of your fields stacked in rows, so to counteract the CSS mentioned in this article, for mobile devices, you may want to also add this CSS as well.

```

@media (max-width: 600px) {
.wpforms-field-authorize_net .wpforms-field-row {
    float: none !important;
    width: 100% !important;
}

.wpforms-field-authorize_net .wpforms-field-row:nth-of-type(2) {
    margin-left: 0;
}
}	
```

![adding the CSS for smaller screens to reduce the authorize.net credit card field back to two lines](https://wpforms.com/wp-content/uploads/2022/07/Screen-Shot-2022-07-21-at-2.41.53-PM-192x300.png)

**Categories:** Snippets

**Tags:** CSS

---