Das Attribut placeholder deutet an, was ein Eingabefeld erwartet, solange es leer ist. Früher brauchte seine Gestaltung vier Vendor-Präfixe, heute genügt ein einziger Selektor ::placeholder. Sehen wir uns an, wie man den Hinweis richtig gestaltet, welcher darauf aufbauende Kniff ein Formular angenehmer macht und warum er die Feldbeschriftung niemals ersetzen darf.
Das Wichtigste: ein Platzhalter ist keine Beschriftung
Der Hinweis verschwindet beim ersten eingegebenen Zeichen. Wer mitten im Formular unterbrochen wird, weiß nicht mehr, was er ausfüllt; in manchen Browsern liest ein Screenreader ihn gar nicht vor; die Autovervollständigung greift schlechter. Deshalb braucht jedes Feld eine echte <label>, während der Platzhalter nur Format oder Beispiel trägt.
<!-- so nicht -->
<input type="tel" name="phone" placeholder="Telefon im Format +380…">
<!-- so richtig -->
<label for="phone">Telefon</label>
<input type="tel" id="phone" name="phone"
placeholder="+380 __ ___ __ __" autocomplete="tel">Farbe und Schrift des Hinweises ändern
Heute reicht eine Regel — ::placeholder unterstützen alle aktuellen Browser:
input::placeholder,
textarea::placeholder {
color: #8A8A8A;
font-style: italic;
opacity: 1; /* Firefox dämpft den Hinweis standardmäßig */
}Die Zeile mit opacity ist kein Beiwerk: Firefox stellt den Platzhalter seit jeher halbtransparent dar, und ohne sie wirkt die gewählte Farbe blasser als gedacht.
Die Menge der Eigenschaften, die tatsächlich greifen, ist klein: Farbe, Hintergrund, die ganze font-*-Familie, Zeichen- und Wortabstand, text-decoration, text-transform, line-height, opacity und text-overflow. Innenabstände, Rahmen und Positionierung gelten nicht — das ist Sache des Feldes selbst.
Die alten Präfixe und warum man sie kennen sollte
Artikel von vor fünf Jahren schrieben denselben Effekt so:
::-webkit-input-placeholder { color: #8A8A8A; }
::-moz-placeholder { color: #8A8A8A; }
:-moz-placeholder { color: #8A8A8A; }
:-ms-input-placeholder { color: #8A8A8A; }Der Grund: Es gab keinen Standard, und jede Engine setzte die Gestaltung eigen um — im IE und in Firefox bis Version 19 galt der Platzhalter als Pseudoklasse, in WebKit und Blink als Pseudoelement. Heute brauchen diese Zeilen nur Projekte mit sehr alten Browsern. Wichtiges Detail: Diese Selektoren darf man nicht per Komma zusammenfassen — ein Browser, der einen davon nicht kennt, verwirft die ganze Regel.
Langer Hinweis in schmalem Feld
Am Handy werden Felder schmal, und langer Text bricht mitten im Wort ab. Drei Punkte sehen sauberer aus:
input::placeholder {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}Der Kniff funktioniert, behandelt aber das Symptom. Passt der Hinweis nicht, ist er zu lang: das Muster „+380 __ ___ __ __“ liest sich besser als ein Satz über die volle Breite.
Den Hinweis beim Fokus ausblenden
Browser verhalten sich unterschiedlich: die einen entfernen den Platzhalter, sobald der Cursor steht, die anderen halten ihn bis zum ersten Zeichen. Eine Zeile vereinheitlicht das:
input:focus::placeholder,
textarea:focus::placeholder {
color: transparent;
}Schöner noch mit sanftem Wegschieben:
input::placeholder {
opacity: 1;
transition: opacity .2s ease, transform .2s ease;
}
input:focus::placeholder {
opacity: 0;
transform: translateX(6px);
}Feldzustände und :placeholder-shown
Die eigene Pseudoklasse :placeholder-shown greift, solange das Feld leer und der Hinweis sichtbar ist. Darauf bauen Kniffe auf, für die früher ein Skript nötig war.
Die schwebende Beschriftung liegt über dem leeren Feld und wandert nach oben, sobald Text erscheint. Der ganze Effekt in CSS:
<div class="field">
<input type="text" id="name" placeholder=" ">
<label for="name">Ihr Name</label>
</div>.field { position: relative; }
.field label {
position: absolute;
left: 12px;
top: 12px;
color: #8A8A8A;
pointer-events: none;
transition: transform .15s ease, font-size .15s ease;
}
/* Feld gefüllt oder im Fokus — die Beschriftung wandert nach oben */
.field input:not(:placeholder-shown) + label,
.field input:focus + label {
transform: translateY(-22px);
font-size: 12px;
}Das Leerzeichen in placeholder=" " ist Pflicht: Ohne das Attribut greift :placeholder-shown überhaupt nicht.
Derselbe Selektor hebt leere Pflichtfelder hervor, und zwar erst, nachdem der Besucher sie berührt hat:
input:required:not(:placeholder-shown):invalid {
border-color: #C0392B;
}Barrierefreiheit und dunkles Design
- Kontrast. Hellgrauer Hinweis auf Weiß ist der klassische Fehler. WCAG verlangt mindestens 4,5:1 für Fließtext; der Hinweis darf gedämpft sein, aber lesbar.
- Die Beschriftung nicht der Optik opfern. Verlangt das Design Felder ohne sichtbare Beschriftung, muss sie trotzdem im Markup stehen — wenigstens als
aria-label. - Dunkles Design. Legen Sie die Hinweisfarbe als Token fest und überschreiben Sie sie in einer Media Query:
input::placeholder { color: #8A8A8A; }
@media (prefers-color-scheme: dark) {
input::placeholder { color: #9B9B9B; }
}- Nichts Wichtiges in den Platzhalter. Passwortregeln, Datumsformat, Pflichtangaben — das ist Text neben dem Feld, kein Hinweis, der verschwindet.
Das Wichtigste in Kürze
Für die Gestaltung reicht heute ::placeholder, Vendor-Präfixe braucht nur, wer sehr alte Browser bedient. Für Feldzustände gibt es :placeholder-shown: darauf beruhen die schwebende Beschriftung und das Hervorheben leerer Felder — ganz ohne JavaScript. Die Hauptregel bleibt: Der Platzhalter zeigt das Format, die Beschriftung sagt, worum es geht, und keines ersetzt das andere.
Wenn das Formular auf Ihrer Website funktioniert, Besucher es aber auf halbem Weg abbrechen, schreiben Sie uns — wir finden, wo die Anfragen verloren gehen.
