Anpassen des Stils einzelner Formularfelder

Aktualisiert:
Markdown anzeigen

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

In diesem Tutorial stellen wir eine Liste von fast jedem Selektor bereit, den Sie möglicherweise benötigen, um einzelne Felder in Ihren Formularen zu gestalten.

Hinweis: Dieses Tutorial ist etwas fortgeschrittener und erfordert einige CSS-Kenntnisse. Wenn Sie keinen Code verwenden möchten, sehen Sie sich unsere Anleitung zum Gestalten von WPForms im Block-Editor an.

Verwendung des unten stehenden Codes

Nachfolgend finden Sie eine Liste der CSS-Selektoren, die Sie benötigen, um einzelne Formularfelder mit Ihrem CSS-Code anzusprechen.

Ebenfalls enthalten sind die Standardstile, die WPForms automatisch auf diese Selektoren anwendet. Um Teile Ihres Formulars anzupassen, können Sie mit dem Kopieren eines CSS-Snippets aus diesem Tutorial auf Ihre Website beginnen und es dann nach Bedarf bearbeiten.

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

WPForms-Selektoren und Standardstile

Einige der Stile, die Sie in Ihrem Formular sehen (wie die Schriftart), stammen von Ihrem Theme. WPForms enthält auch einige grundlegende Stile, damit Ihre Formulare auf jedem Theme gut aussehen. Unabhängig davon, woher die anfängliche Formatierung stammt, kann sie normalerweise durch die Verwendung sehr spezifischer CSS-Selektoren überschrieben werden.

Hinweis: Beim Hinzufügen von CSS zu Ihrer Website kann es notwendig sein, !important vor dem Semikolon einzufügen, um sicherzustellen, dass Ihre benutzerdefinierten Stile erfolgreich angewendet werden. Dies hilft, jedes CSS zu überschreiben, das von Ihrem Theme oder anderen Plugins hinzugefügt wurde. Weitere Details finden Sie in unserer Anleitung zur Fehlerbehebung bei CSS.

Nachfolgend finden Sie eine Liste von CSS-Selektoren, die sich auf jeden Teil eines Formulars beziehen, sowie die Stile, die standardmäßig von WPForms enthalten sind.

Formulartitel und -beschreibung

.wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

Formularbeschreibung

.wpforms-form .wpforms-description {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0 0;
}

Mehrseitiger Fortschrittsanzeiger

Hinweis: Um die grüne Füllfarbe des Fortschrittsanzeigers zu ändern, verwenden Sie bitte die mehrseitigen Optionen im Formular-Builder.

Fortschrittsanzeiger-Seitentitel

span.wpforms-page-indicator-page-title {
    font-size: 18px;
}

Fortschrittsanzeiger-Schritte

span.wpforms-page-indicator-steps {
    font-size: 18px;
}

Fortschrittsanzeiger-Aktueller Schritt

span.wpforms-page-indicator-steps-current {
    font-size: 18px;
}

Fortschrittsanzeiger-Fortschrittsbalken

Fortschrittsbalken

.wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress-wrap {
    display: block;
    width: 100%;
    background-color: #ddd;
    height: 18px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin: 5px 0 0;
}

Fortschrittsanzeiger-Fortschrittsbalken (nur Füllung)

.wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress {
    height: 18px;
    position: absolute;
    left: 0;
    top: 0;
}

Fortschrittsanzeiger: Kreise

Fortschrittsanzeige-Kreise

Kreise der Schritte (Farben gelten nur für nicht aktive)

.wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page-number {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 10px 0 0;
    line-height: 40px;
    text-align: center;
    background-color: #ddd;
    color: #666;
}

Aktueller Schrittkreis

.wpforms-form .wpforms-page-indicator.circles .active .wpforms-page-indicator-page-number {
    color: #fff;
}

Fortschrittsanzeigen-Verbinder

Fortschrittsanzeigen-Verbinder

Schrittabschnitte

.wpforms-form .wpforms-page-indicator.connector .wpforms-page-indicator-page {
    float: left;
    text-align: center;
    font-style: 16px;
    line-height: 1.2;
}

Globale Formularfeld-Selektoren

Alle Feldbezeichnungen

.wpforms-form .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Alle Feld-Unterbezeichnungen

.wpforms-form .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}

Alle Feld-Beschreibungen

.wpforms-form .wpforms-field-description {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0 0;
}

Rahmen um alle Eingabefelder

.wpforms-container input[type=date], .wpforms-container input[type=datetime], .wpforms-container input[type=datetime-local], .wpforms-container input[type=email], .wpforms-container input[type=month], .wpforms-container input[type=number], .wpforms-container input[type=password], .wpforms-container input[type=range], .wpforms-container input[type=search], .wpforms-container input[type=tel], .wpforms-container input[type=text], .wpforms-container input[type=time], .wpforms-container input[type=url], .wpforms-container input[type=week], .wpforms-container select, .wpforms-container textarea {
    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;
}

Abstand zwischen allen Feldern

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

Alle kleinen Eingabefelder

.wpforms-container input.wpforms-field-small, .wpforms-container select.wpforms-field-small, .wpforms-container .wpforms-field-row.wpforms-field-small { 
   max-width: 25%;
}

Alle mittleren Eingabefelder

.wpforms-container input.wpforms-field-medium, .wpforms-container select.wpforms-field-medium, .wpforms-container .wpforms-field-row.wpforms-field-medium {
   max-width: 60%;
}

Alle großen Eingabefelder

.wpforms-container input.wpforms-field-large, .wpforms-container select.wpforms-field-large, .wpforms-container .wpforms-field-row.wpforms-field-large { 
   max-width: 100%;
}

Bestätigungsnachricht

Bestätigungsnachricht

.wpforms-confirmation-container-full {
    color: #333;
    margin: 0 0 24px 0;
    background: #e0ffc7;
    border: 1px solid #b4d39b;
    padding: 15px 15px;
}

Erforderliche Felder

„Erforderlich“-Sternchen

Sternchen für Pflichtfeld

.wpforms-form .wpforms-required-label {
    color: #ff0000;
    font-weight: 400;
}

Validierungsfehler

Validierungsfehler

Feldrahmen
.wpforms-form .wpforms-field input.wpforms-error, .wpforms-form .wpforms-field textarea.wpforms-error, .wpforms-form .wpforms-field select.wpforms-error {
    border: 1px solid #cc0000;
}
Validierungsnachricht
.wpforms-container em.wpforms-error {
    display: block;
    color: #990000;
    font-size: 12px;
    float: none;
}
Validierungsfehler-Symbol

Symbol für Validierungsfehler

 .wpforms-container-full .wpforms-form em.wpforms-error:before {
    content: '';
    position: relative;
    display: inline-block;
    right: 5px;
    top: 1.5px;
    width: 16px;
    height: 14px;
    background-color: var(--wpforms-label-error-color);
}

Standardfelder

Einzeiliger Text

Einzeiliges Textfeld

Abstand für einzeiligen Text
.wpforms-form  .wpforms-field.wpforms-field-text {
    padding: 10px 0;
    clear: both;
}
Bezeichnung für einzeiligen Text
.wpforms-form .wpforms-field.wpforms-field-text .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Eingabefeld für einzeiligen Text
.wpforms-form .wpforms-field.wpforms-field-text 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: 38px;
    width: 100%;
    line-height: 1.3;
}

Absatztext

Absatztextfeld

Abstand für Paragraphentext
.wpforms-form .wpforms-field.wpforms-field-textarea {
    padding: 10px 0;
    clear: both;
}
Bezeichnung für Paragraphentext
.wpforms-form .wpforms-field.wpforms-field-textarea .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Eingabefeld für Paragraphentext
.wpforms-form .wpforms-field.wpforms-field-textarea textarea {
    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;
}

Dropdown-Feld

.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic {
    padding: 10px 0;
    clear: both;
}
.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
.wpforms-form .wpforms-valid {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background-color: #ffffff;
    padding: 4px 6px 1px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    min-height: 35px;
    overflow: hidden;
}

Dropdown-Feld

.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-modern {
    padding: 10px 0;
    clear: both;
}
.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-modern .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
.wpforms-form .choices__inner {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background-color: #ffffff;
    padding: 4px 6px 1px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    min-height: 35px;
    overflow: hidden;
}

Mehrfachauswahl

Feld für Mehrfachauswahl

Abstand für Multiple-Choice-Felder
.wpforms-form .wpforms-field.wpforms-field-radio {
    padding: 10px 0;
    clear: both;
}
Bezeichnung für Multiple-Choice-Felder
.wpforms-form .wpforms-field.wpforms-field-radio .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Bezeichnungen für Multiple-Choice-Optionen
.wpforms-form .wpforms-field.wpforms-field-radio ul li .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

Kontrollkästchen

Kontrollkästchenfeld

Abstand für Kontrollkästchen
.wpforms-form .wpforms-field.wpforms-field-checkbox {
    padding: 10px 0;
    clear: both;
}
Bezeichnung für Kontrollkästchen
.wpforms-form .wpforms-field.wpforms-field-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;
}
Bezeichnungen für Kontrollkästchen-Optionen
.wpforms-form .wpforms-field.wpforms-field-checkbox ul li .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

Zahlen

Zahlenfeld

Abstand für Zahlen
.wpforms-form .wpforms-field.wpforms-field-number {
    padding: 10px 0;
    clear: both;
}
Zahlenbeschriftung
.wpforms-form .wpforms-field.wpforms-field-number .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Zahlen-Eingabefeld
.wpforms-form .wpforms-field.wpforms-field-number 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: 38px;
    width: 100%;
    line-height: 1.3;    
}

Name

Namensfeld

Vorname-Eingabefeld
.wpforms-form input[type=text].wpforms-field-name-first {
    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;
}
Zweitname-Eingabefeld
.wpforms-form input[type=text].wpforms-field-name-middle {
    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;
}
Nachname-Eingabefeld
.wpforms-form input[type=text].wpforms-field-name-last {
    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;
}

E-Mail

E-Mail-Feld

E-Mail-Abstand
.wpforms-form .wpforms-field.wpforms-field-email {
    padding: 10px 0;
    clear: both;
}
E-Mail-Beschriftung
.wpforms-form .wpforms-field.wpforms-field-email .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
E-Mail-Eingabefeld (nur Primär)
.wpforms-form input[type=email].wpforms-field-email-primary {
    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;    
}
E-Mail-Eingabefeld (nur E-Mail bestätigen)
.wpforms-form input[type=email].wpforms-field-email-confirmation {
    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;    
}
E-Mail-Unterbeschriftungen
.wpforms-form .wpforms-field.wpforms-field-email .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}

Zahlen-Schieberegler

Zahlenreglerfeld

Zahlenregler-Abstand
.wpforms-form .wpforms-field.wpforms-field-number-slider {
    padding: 10px 0;
    clear: both;
}
Zahlenregler-Beschriftung
.wpforms-form .wpforms-field.wpforms-field-number-slider .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Zahlenregler-Leiste
.wpforms-form .wpforms-field.wpforms-field-number-slider input[type=range] {
    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;
}

DSGVO-Zustimmung

DSGVO-Zustimmungsfeld

DSGVO-Zustimmungs-Abstand
.wpforms-form .wpforms-field.wpforms-field-gdpr-checkbox {
    padding: 10px 0;
    clear: both;
}
DSGVO-Zustimmungs-Beschriftung
.wpforms-form .wpforms-field.wpforms-field-gdpr-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;
}

Das ist alles! Sie können diese Selektoren jetzt verwenden, um benutzerdefiniertes CSS auf Standardfelder in Ihren Formularen anzuwenden.

Möchten Sie als Nächstes andere Felder in WPForms gestalten? Schauen Sie sich unbedingt unsere Tutorials zur Anpassung des Stils von Fancy-Feldern und Zahlungsfeldern an.

Immer noch festgefahren? Wie können wir helfen?
Zuletzt aktualisiert am 04. Juni 2024

Das beste WordPress Drag-and-Drop-Formular-Builder-Plugin

Einfach, schnell und sicher. Schließen Sie sich über 6 Millionen Website-Besitzern an, die WPForms vertrauen.