### [Platzhaltertext für Formularfelder gestalten](https://wpforms.com/developers/style-placeholder-text-for-form-fields/)
**Veröffentlicht:** 14. Oktober 2019
**Autor:** Redaktionsteam
**Auszug:** Dieser CSS-Schnipsel hilft Ihnen, den Platzhaltertext an Ihr individuelles Branding auf Ihrer Website anzupassen.
**Inhalt:**
Möchten Sie das Aussehen des Platzhaltertextes 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 Standardgestaltung für Platzhaltertext aus verschiedenen Quellen übernommen werden kann, darunter Ihr WordPress-Theme, die WPForms-Einstellungen (abhängig von Ihren Einstellungen) oder die Browsereinstellungen des Benutzers.
Bevor wir mit der Gestaltung der Platzhalter beginnen, müssen wir zunächst ein Formular erstellen, das diesen Text verwendet. Sobald Sie Ihr Formular erstellt haben, müssen Sie Ihren **Platzhaltertext** für jedes Feld über den Tab **Erweitert** in den Feldeinstellungen hinzufügen.
Wenn Sie Hilfe beim Hinzufügen von Platzhaltertext benötigen, [lesen Sie bitte diese Dokumentation](https://wpforms.com/docs/how-to-add-placeholder-text-to-a-form-field/ "So fügen Sie Platzhaltertext zu einem Formularfeld hinzu").
## Gestaltung 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 auf unser Tutorial zu diesem Thema beziehen.
Das unten angegebene CSS ändert den gesamten WPForms-Platzhaltertext in eine orange Farbe (#e27730):
```
.wpforms-container ::-webkit-input-placeholder { /* Chrome und Safari */
color: #e27730 !important;
}
.wpforms-container :-moz-placeholder { /* Mozilla Firefox 4 bis 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](https://www.w3schools.com/cssref/css3_pr_opacity.asp "CSS-Deckkraft-Eigenschaft") auf alle Platzhalter von Formularfeldern an, wodurch sie transparenter als andere Browser sind.
Dies wird im obigen CSS bereits durch die Festlegung der Deckkraft für Firefox-spezifisches CSS auf **opacity: 1;** berücksichtigt.
Und das ist alles, was Sie brauchen, um den Platzhaltertext zu gestalten. Möchten Sie die Bestätigungsnachricht mit CSS gestalten? In unserem Tutorial [So entfernen Sie die Gestaltung der Bestätigungsnachricht](https://wpforms.com/developers/how-to-remove-confirmation-message-box-styling/ "So entfernen Sie die Gestaltung der Bestätigungsnachricht") zeigen wir Ihnen, wie Sie diese Gestaltung ä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](https://wpforms.com/developers/how-to-style-the-dropdown-field/ "So gestalten Sie das Dropdown-Feld").
**Kategorien:** Gestaltung
**Schlagwörter:** CSS, Platzhaltertext
---