### [Comment personnaliser le champ de saisie de l’auteur.net](https://wpforms.com/developers/how-to-customize-the-authorize-net-placeholder/)
**Publié le :** 7 juillet 2021
**Auteur :** Équipe éditoriale
**Extrait :** Ce tutoriel vous montrera comment utiliser le CSS pour styliser votre champ de saisie de l’auteur.net.
**Contenu :**
## Introduction
Souhaitez-vous personnaliser le champ de saisie de l’auteur.net que vous voyez sur le champ **Numéro de carte de crédit** ? En utilisant le CSS, vous pouvez facilement styliser non seulement le champ de numéro, mais aussi le champ **Code de sécurité**. Dans ce tutoriel, nous vous montrerons le CSS nécessaire pour styliser ces deux champs.
Par défaut, le champ dans lequel vous entrez votre carte de crédit est stylisé avec quelques styles par défaut.
## Création du formulaire
Tout d’abord, nous allons commencer par créer un formulaire de don simple et ajouter le champ de carte de crédit de l’auteur.net. Si vous avez besoin d’aide pour créer ce type de formulaire, [veuillez consulter cette documentation](https://wpforms.com/docs/how-to-install-and-use-the-authorize-net-addon-with-wpforms/ "Comment installer et utiliser le module complémentaire Authorize.Net avec WPForms").
Une fois que vous avez ajouté le champ de formulaire de l’auteur.net, accédez aux **Options du champ** et cliquez sur l’onglet **Avancé**. À partir de là, vous pouvez ajouter votre texte de **Champ de saisie**.
## Ajout du CSS
Il est maintenant temps d’ajouter le CSS à votre site.
Si vous avez besoin d’aide pour ajouter du CSS à votre site, [veuillez consulter ce tutoriel](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Comment ajouter des styles CSS personnalisés pour WPForms").
```
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;
}
```
Le nom de classe CSS **input.wpforms-field-authorize\_net-cardnumber** stylisera uniquement le champ **Numéro de carte** tandis que le nom de classe **input.wpforms-field-authorize\_net-cardcvc** stylisera uniquement le champ **Code de sécurité**.
Le CSS ci-dessus stylisera tous les champs de numéro de carte et de code de sécurité pour l’auteur.net pour tous les formulaires.
Et c’est tout ce dont vous avez besoin pour personnaliser les champs de saisie de l’auteur.net. Souhaitez-vous également envoyer un numéro de facture ? Consultez cet article sur [Comment envoyer un numéro de facture aux paiements de l’auteur.net](https://wpforms.com/developers/how-to-send-an-invoice-number-through-to-authorize-net-payments/ "Comment envoyer un numéro de facture aux paiements de l’auteur.net").
**Catégories :** Tutoriels
**Tags :** CSS
---