How to Customize the Authorize.net Placeholder

Overview

Would you like to customize the Authorize.net placeholder you see on the Credit Card Number field? Using CSS you can easily style not only the number field but also the Security Code field. In this tutorial, we’ll show you the CSS needed to style these two fields.

By default, the field that you enter your credit card with is styled with some default styling.

default styling for Authorize.net Credit Card field

Setup

In order to customize the styles of the Authorize.net placeholder on the Credit Card Number and Security Code fields, you’ll need to add this CSS to your site.

If you need assistance in adding CSS to your site, please see this tutorial.

input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* Chrome/Opera/Safari */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* Firefox 19+ */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* IE 10+ */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* Firefox 18- */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}

The CSS class name input.wpforms-field-authorize_net-cardnumber will style only the Card Number field whereas the input.wpforms-field-authorize_net-cardcvc class name will only style the Security Code field.

The above CSS will style all card number and security code fields for Authorize.net for all forms.

adding the css is all you need to customize the authorize.net placeholder

And that’s all you need to customize the Authorize.net placeholder fields. Would you like to also send through an invoice number? Take a look at this article on How to Send an Invoice Number Through to Authorize.net Payments.