### [Anpassen des Authorize.net-Kreditkartenfelds](https://wpforms.com/developers/how-to-customize-the-authorize-net-credit-card-field/)
**Veröffentlicht:** 16. Juli 2021
**Autor:** Redaktionsteam
**Auszug:** Dieser Artikel zeigt Ihnen, wie Sie mit CSS Ihr Authorize.net-Feld einzeilig anzeigen lassen.
**Inhalt:**
## Übersicht
Möchten Sie das **Authorize.net**-Feld anpassen? Sie können das Aussehen dieses Feldes einfach ändern. Wir werden zum Beispiel das Kreditkartenfeld so gestalten, dass es einzeilig ist. Dazu benötigen wir etwas CSS, damit jedes Feld inline angezeigt wird.
## Einrichtung
Sie müssen zuerst ein Formular erstellen und das **Authorize.net**-Feld zu Ihrem Formular hinzufügen.
Wenn Sie Hilfe beim Erstellen eines Authorize.net-Formulars benötigen, [lesen Sie bitte diese Dokumentation](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").
Die Felder **Kartennummer**, **Ablaufdatum** und **Sicherheitscode** haben ein Standard-Styling, das die **Kartennummer** in einer Zeile anzeigt und die anderen auf die nächste Zeile verschiebt.
## Hinzufügen des CSS zur Anpassung des Authorize.net-Feldes
Jetzt ist es an der Zeit, das CSS hinzuzufügen, damit wir alle drei Felder in einer Zeile anzeigen können.
Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, [lesen Sie bitte dieses 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;
}
```
Das obige CSS würde alle **Authorize.net Kreditkarten**-Felder auf die gleiche Weise stylen.
Mit diesem CSS haben wir das **Authorize.net**-Feld so angepasst, dass alle Felder in einer einzigen Zeile angezeigt werden.
Das ist alles, was Sie benötigen, um das **Authorize.net**-Formularfeld anzupassen. Möchten Sie auch die Adresse mit der Authorize.net-Zahlung senden? Sehen Sie sich unser Tutorial [So senden Sie eine Adresse über Authorize.net-Zahlungen](https://wpforms.com/developers/how-to-send-an-address-through-to-authorize-net-payments/ "How to Send an Address Through to Authorize.net Payments") an.
## FAQ
#### F: Wie kann ich dies auf mobilen Geräten wieder auf einzelne Zeilen zurücksetzen?
**A:** Für kleinere Bildschirme möchten Sie, dass alle Ihre Felder in Zeilen gestapelt sind. Um das in diesem Artikel erwähnte CSS zu konterkarieren, möchten Sie für mobile Geräte möglicherweise auch dieses CSS hinzufügen.
```
@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;
}
}
```
**Kategorien:** Snippets
**Tags:** CSS
---