Anpassen des Stils der Zahlungsfelder

Möchten Sie einzelne Felder in Ihren Formularen gestalten, ohne andere Formularfelder zu beeinträchtigen? Mit dem richtigen CSS-Selektor können Sie die Stile jeder Formularkomponente an Ihre Bedürfnisse anpassen.

In diesem Tutorial finden Sie eine Liste von Selektoren, die Sie für die Gestaltung von Zahlungsfeldern in WPForms benötigen.

Hinweis: Die Schritte in diesem Tutorial sind fortgeschritten und erfordern einige Kenntnisse in CSS. Wenn Sie es vorziehen, keinen Code zu verwenden, können Sie unsere Anleitung zur Gestaltung von WPForms im Block-Editor lesen.

Verwendung der untenstehenden Code-Schnipsel

Nachfolgend finden Sie eine Liste der CSS-Selektoren, die Sie benötigen, um mit Ihrem CSS-Code auf bestimmte ausgefallene Felder zuzugreifen.

Wir haben auch die Standardstile hinzugefügt, die WPForms automatisch auf diese Selektoren anwendet. Um einen beliebigen Teil Ihres Formulars anzupassen, können Sie ein CSS-Snippet aus diesem Tutorial in Ihre Website kopieren und es dann nach Bedarf bearbeiten.

Hinweis: Sie wissen nicht, wie Sie CSS zu Ihrer Website hinzufügen können? Sehen Sie sich das WPBeginner-Tutorial zum Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Website an.

Zahlungsfelder

Hinweis: Wenn Sie mehr über die Verwendung des unten stehenden Codes erfahren möchten, lesen Sie bitte unser Tutorial zur Anpassung des Stils von Standardfeldern und anderen Formularelementen.

Zahlungsfelder

Einzelner Artikel

Feld "Einzelner Artikel

Einzelnes Element Polsterung

.wpforms-form .wpforms-field.wpforms-field-payment-single {
    padding: 10px 0;
    clear: both;
}

Einzel-Etikett

.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;
}

Mehrere Artikel

Mehrere Artikel auffüllen

.wpforms-form .wpforms-field.wpforms-field-payment-multiple {
    padding: 10px 0;
    clear: both;
}

Etikett für mehrere Artikel

.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;
}

Kontrollkästchen

Auffüllen von Kontrollkästchen

.wpforms-form .wpforms-field.wpforms-field-payment-checkbox {
    padding: 10px 0;
    clear: both;
}

Kontrollkästchen Elemente Etikett

.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;
}

Kontrollkästchen-Etiketten

.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;
}

.wpforms-form .wpforms-field.wpforms-field-payment-select {
    padding: 10px 0;
    clear: both;
}

.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-Kreditkarte

Stripe-Kreditkarten-Polsterung

.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card {
    padding: 10px 0;
    clear: both;
}

Stripe-Kreditkarten-Etikett

.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-Kreditkarten-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;
}

Eingabefeld für Streifenkartennummer

.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;
}

Streifenname im Karteneingabefeld

.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;
}

Platz

Quadratische Polsterung

.wpforms-form .wpforms-field.wpforms-field-square {
    padding: 10px 0;
    clear: both;
}

Quadratisches Etikett

.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;
}

Quadratische Unteretiketten

.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 Eingabefeld

.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;
}

Quadratischer Name auf Karteneingabefeld

.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 Auffüllen

.wpforms-form .wpforms-field.wpforms-field-authorize_net {
    padding: 10px 0;
    clear: both;
}

Authorize.Net-Etikett

.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-Unterlabels

.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 Kartennummer Eingabefeld

.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 Karte Monat und Jahr

.wpforms-form .wpforms-field.wpforms-field-authorize_net select {
    max-width: 100%;
    text-transform: none;
    white-space: nowrap;
}

Authorize.Net Sicherheitscode Eingabefeld

.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-Polsterung

.wpforms-form .wpforms-field.wpforms-field-payment-coupon {
    padding: 10px 0;
    clear: both;
}

Coupon-Etikett

.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-Eingabefeld

.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;
}

Schaltfläche "Coupon anwenden

.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)
}

Insgesamt

Total Polsterung

.wpforms-form .wpforms-field.wpforms-field-payment-total {
    padding: 10px 0;
    clear: both;
}

Gesamtes Etikett

.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;
}

Das war's! Jetzt wissen Sie, wie Sie diese Selektoren verwenden können, um benutzerdefiniertes CSS auf Zahlungsfelder in Ihren Formularen anzuwenden.

Möchten Sie noch mehr Anpassungsmöglichkeiten? Schauen Sie sich unbedingt unser Tutorial zur Anpassung der Schaltfläche "Senden" an.