So stylen Sie Platzhaltertext für Formularfelder

Möchten Sie das Erscheinungsbild von Platzhaltertext in Ihren WPForms-Formularfeldern anpassen? Mit ein paar Zeilen benutzerdefiniertem CSS können Sie dies ganz einfach erreichen. Platzhaltertext dient als temporäre Information innerhalb eines Feldes und verschwindet, wenn ein Benutzer mit dem Feld interagiert. Im folgenden Artikel führen wir Sie durch den Prozess der Gestaltung von Platzhaltertext für Ihre Formularfelder.

Beachten Sie, dass die Standardformatierung für Platzhaltertext aus verschiedenen Quellen übernommen werden kann, einschließlich Ihres WordPress-Themes, der WPForms-Einstellungen (abhängig von Ihren Einstellungen) oder der Browsereinstellungen des Benutzers.

Bevor wir mit der Gestaltung der Platzhalter beginnen, müssen wir zuerst ein Formular erstellen, das diesen Text verwendet. Sobald Sie Ihr Formular erstellt haben, müssen Sie Ihren Platzhalter-Text für jedes Feld über den Erweitert-Tab der Feld-Einstellungen hinzufügen.

Styling des Platzhaltertextes

Bei der Gestaltung von Platzhaltertext ist es wichtig, mehrere Selektoren einzuschließen, jeder mit seinem eigenen Vendor-Präfix. Dies stellt sicher, dass die Stile über verschiedene Browser und Versionen hinweg konsistent angewendet werden. Obwohl die CSS wiederholend erscheinen mag, ist die Einbeziehung aller Selektoren für eine umfassende Browserunterstützung entscheidend.

Um diese Stile auf Ihrer Website zu implementieren, fügen Sie einfach das folgende CSS hinzu. Wenn Sie unsicher sind, wo oder wie Sie benutzerdefiniertes CSS hinzufügen können, können Sie sich unser Tutorial zu diesem Thema ansehen.

Das unten angegebene CSS ändert den gesamten WPForms-Platzhaltertext in eine orange Farbe (#e27730):

.wpforms-container ::-webkit-input-placeholder { /* Chrome and Safari */
   color: #e27730 !important;
}
 
.wpforms-container :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #e27730 !important;
   opacity: 1 !important;
}
 
.wpforms-container ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #e27730 !important;
   opacity: 1 !important;
}
 
.wpforms-container :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #e27730 !important;
}
 
.wpforms-container ::-ms-input-placeholder { /* Microsoft Edge */
   color: #e27730 !important;
}
 
.wpforms-container ::placeholder {
   color: #e27730 !important;
}

Firefox wendet automatisch eine geringere Deckkraft auf alle Platzhalter in Formularfeldern an, wodurch sie transparenter als in anderen Browsern erscheinen.

Dies wird bereits im obigen CSS durch Festlegen der Deckkraft für Firefox-spezifisches CSS auf Deckkraft: 1; behandelt.

Und das ist alles, was Sie brauchen, um den Platzhaltertext zu gestalten. Möchten Sie die Bestätigungsnachricht mit CSS gestalten? In unserem Tutorial Styling der Bestätigungsnachricht-Box entfernen zeigen wir Ihnen, wie Sie dieses Styling ändern können.

FAQ

F: Kann ich dieses CSS verwenden, um ein Dropdown-Feld zu gestalten?

A: Wenn Sie das Dropdown-Feld gestalten möchten, sehen Sie sich stattdessen diesen Artikel an.