{"id":12010,"date":"2026-10-28T21:06:45","date_gmt":"2026-10-28T18:06:45","guid":{"rendered":"https:\/\/webmister.pro\/placeholder-gestalten-css\/"},"modified":"2026-10-28T21:06:45","modified_gmt":"2026-10-28T18:06:45","slug":"placeholder-gestalten-css","status":"publish","type":"post","link":"https:\/\/webmister.pro\/de\/placeholder-gestalten-css\/","title":{"rendered":"Platzhalter mit CSS gestalten"},"content":{"rendered":"<p>Das Attribut <code>placeholder<\/code> deutet an, was ein Eingabefeld erwartet, solange es leer ist. Fr\u00fcher brauchte seine Gestaltung vier Vendor-Pr\u00e4fixe, heute gen\u00fcgt ein einziger Selektor <code>::placeholder<\/code>. 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.<\/p>\n<nav class=\"wppub-toc\" aria-label=\"Inhaltsverzeichnis\">\n<p class=\"wppub-toc__title\">Inhaltsverzeichnis<\/p>\n<ul class=\"wppub-toc__list\">\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#das-wichtigste-ein-platzhalter-ist-keine-beschriftung\">Das Wichtigste: ein Platzhalter ist keine Beschriftung<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#farbe-und-schrift-des-hinweises-andern\">Farbe und Schrift des Hinweises \u00e4ndern<\/a>\n<ul class=\"wppub-toc__list wppub-toc__list--sub\">\n<li class=\"wppub-toc__item wppub-toc__item--sub\"><a class=\"wppub-toc__link\" href=\"#die-alten-prafixe-und-warum-man-sie-kennen-sollte\">Die alten Pr\u00e4fixe und warum man sie kennen sollte<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#langer-hinweis-in-schmalem-feld\">Langer Hinweis in schmalem Feld<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#den-hinweis-beim-fokus-ausblenden\">Den Hinweis beim Fokus ausblenden<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#feldzustande-und-placeholder-shown\">Feldzust\u00e4nde und :placeholder-shown<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#barrierefreiheit-und-dunkles-design\">Barrierefreiheit und dunkles Design<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#das-wichtigste-in-kurze\">Das Wichtigste in K\u00fcrze<\/a><\/li>\n<\/ul>\n<\/nav>\n<h2 id=\"das-wichtigste-ein-platzhalter-ist-keine-beschriftung\">Das Wichtigste: ein Platzhalter ist keine Beschriftung<\/h2>\n<p>Der Hinweis verschwindet beim ersten eingegebenen Zeichen. Wer mitten im Formular unterbrochen wird, wei\u00df nicht mehr, was er ausf\u00fcllt; in manchen Browsern liest ein Screenreader ihn gar nicht vor; die Autovervollst\u00e4ndigung greift schlechter. Deshalb braucht jedes Feld eine echte <code>&lt;label&gt;<\/code>, w\u00e4hrend der Platzhalter nur Format oder Beispiel tr\u00e4gt.<\/p>\n<figure><svg viewbox=\"0 0 900 330\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"\u041f\u043b\u0435\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440 \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0438 \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u044c\u044e \u043d\u0430\u0434 \u043f\u043e\u043b\u0435\u043c\" style=\"width:100%;height:auto;max-width:900px;display:block;margin:0 auto 20px\"><text fill=\"#A98086\" letter-spacing=\"1px\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"28\">SO NICHT: DIE BESCHRIFTUNG STECKT NUR IM PLATZHALTER<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"20\" y=\"46\" width=\"300\" height=\"40\"><\/rect><text fill=\"#6E6E6E\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"34\" y=\"72\">Telefon im Format +380\u2026<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"106\">Feld leer \u2014 der Hinweis ist sichtbar<\/text><path stroke=\"#4A4A4A\" stroke-width=\"1.5\" fill=\"none\" d=\"M340 66 h60 m-12 -6 l12 6 l-12 6\"><\/path><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"420\" y=\"46\" width=\"300\" height=\"40\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"434\" y=\"72\">+380 67 502 45 84<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"420\" y=\"106\">Eingabe begonnen \u2014 Hinweis weg<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"420\" y=\"128\">und welches Feld es war, ist nicht mehr erkennbar<\/text><text fill=\"#30738E\" letter-spacing=\"1px\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"186\">SO GEHT'S: EIGENE BESCHRIFTUNG, PLATZHALTER ZEIGT DAS FORMAT<\/text><text fill=\"#CBCBCB\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"214\">Telefon<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"20\" y=\"224\" width=\"300\" height=\"40\"><\/rect><text fill=\"#6E6E6E\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"34\" y=\"250\">+380 __ ___ __ __<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"284\">die Beschriftung bleibt immer<\/text><path stroke=\"#4A4A4A\" stroke-width=\"1.5\" fill=\"none\" d=\"M340 244 h60 m-12 -6 l12 6 l-12 6\"><\/path><text fill=\"#CBCBCB\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"420\" y=\"214\">Telefon<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"420\" y=\"224\" width=\"300\" height=\"40\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"434\" y=\"250\">+380 67 502 45 84<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"420\" y=\"284\">Mensch und Screenreader lesen sie<\/text><\/svg><figcaption>Eine Beschriftung, die nur im Platzhalter steckt, und die richtige Variante mit label<\/figcaption><\/figure>\n<pre><code>&lt;!-- so nicht --&gt;\n&lt;input type=\"tel\" name=\"phone\" placeholder=\"Telefon im Format +380\u2026\"&gt;\n\n&lt;!-- so richtig --&gt;\n&lt;label for=\"phone\"&gt;Telefon&lt;\/label&gt;\n&lt;input type=\"tel\" id=\"phone\" name=\"phone\"\n       placeholder=\"+380 __ ___ __ __\" autocomplete=\"tel\"&gt;<\/code><\/pre>\n<h2 id=\"farbe-und-schrift-des-hinweises-andern\">Farbe und Schrift des Hinweises \u00e4ndern<\/h2>\n<p>Heute reicht eine Regel \u2014 <code>::placeholder<\/code> unterst\u00fctzen alle aktuellen Browser:<\/p>\n<pre><code>input::placeholder,\ntextarea::placeholder {\n    color: #8A8A8A;\n    font-style: italic;\n    opacity: 1; \/* Firefox d\u00e4mpft den Hinweis standardm\u00e4\u00dfig *\/\n}<\/code><\/pre>\n<p>Die Zeile mit <code>opacity<\/code> ist kein Beiwerk: Firefox stellt den Platzhalter seit jeher halbtransparent dar, und ohne sie wirkt die gew\u00e4hlte Farbe blasser als gedacht.<\/p>\n<p>Die Menge der Eigenschaften, die tats\u00e4chlich greifen, ist klein: Farbe, Hintergrund, die ganze <code>font-*<\/code>-Familie, Zeichen- und Wortabstand, <code>text-decoration<\/code>, <code>text-transform<\/code>, <code>line-height<\/code>, <code>opacity<\/code> und <code>text-overflow<\/code>. Innenabst\u00e4nde, Rahmen und Positionierung gelten nicht \u2014 das ist Sache des Feldes selbst.<\/p>\n<h3 id=\"die-alten-prafixe-und-warum-man-sie-kennen-sollte\">Die alten Pr\u00e4fixe und warum man sie kennen sollte<\/h3>\n<p>Artikel von vor f\u00fcnf Jahren schrieben denselben Effekt so:<\/p>\n<pre><code>::-webkit-input-placeholder { color: #8A8A8A; }\n::-moz-placeholder          { color: #8A8A8A; }\n:-moz-placeholder           { color: #8A8A8A; }\n:-ms-input-placeholder      { color: #8A8A8A; }<\/code><\/pre>\n<p>Der Grund: Es gab keinen Standard, und jede Engine setzte die Gestaltung eigen um \u2014 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 \u2014 ein Browser, der einen davon nicht kennt, verwirft die ganze Regel.<\/p>\n<h2 id=\"langer-hinweis-in-schmalem-feld\">Langer Hinweis in schmalem Feld<\/h2>\n<p>Am Handy werden Felder schmal, und langer Text bricht mitten im Wort ab. Drei Punkte sehen sauberer aus:<\/p>\n<pre><code>input::placeholder {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n}<\/code><\/pre>\n<p>Der Kniff funktioniert, behandelt aber das Symptom. Passt der Hinweis nicht, ist er zu lang: das Muster \u201e+380 __ ___ __ __\u201c liest sich besser als ein Satz \u00fcber die volle Breite.<\/p>\n<h2 id=\"den-hinweis-beim-fokus-ausblenden\">Den Hinweis beim Fokus ausblenden<\/h2>\n<p>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:<\/p>\n<pre><code>input:focus::placeholder,\ntextarea:focus::placeholder {\n    color: transparent;\n}<\/code><\/pre>\n<p>Sch\u00f6ner noch mit sanftem Wegschieben:<\/p>\n<pre><code>input::placeholder {\n    opacity: 1;\n    transition: opacity .2s ease, transform .2s ease;\n}\n\ninput:focus::placeholder {\n    opacity: 0;\n    transform: translateX(6px);\n}<\/code><\/pre>\n<h2 id=\"feldzustande-und-placeholder-shown\">Feldzust\u00e4nde und :placeholder-shown<\/h2>\n<p>Die eigene Pseudoklasse <code>:placeholder-shown<\/code> greift, solange das Feld leer und der Hinweis sichtbar ist. Darauf bauen Kniffe auf, f\u00fcr die fr\u00fcher ein Skript n\u00f6tig war.<\/p>\n<figure><svg viewbox=\"0 0 900 290\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442\" style=\"width:100%;height:auto;max-width:900px;display:block;margin:0 auto 20px\"><text fill=\"#848484\" letter-spacing=\"1px\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"28\">DREI FELDZUST\u00c4NDE UND IHRE SELEKTOREN<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"20\" y=\"56\" width=\"260\" height=\"42\"><\/rect><text fill=\"#6E6E6E\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"83\">Ihr Name<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"122\">leer, Hinweis sichtbar<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"13px\" font-family=\"\" sfmono-regular menlo consolas monospace x=\"20\" y=\"150\">::placeholder<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"13px\" font-family=\"\" sfmono-regular menlo consolas monospace x=\"20\" y=\"174\">:placeholder-shown<\/text><rect fill=\"#232323\" stroke=\"#30738E\" stroke-width=\"2\" x=\"320\" y=\"56\" width=\"260\" height=\"42\"><\/rect><text fill=\"#6E6E6E\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"336\" y=\"83\">Ihr Name<\/text><rect x=\"336\" y=\"66\" width=\"1.5\" height=\"22\" fill=\"#30738E\"><\/rect><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"320\" y=\"122\">Cursor im Feld<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"13px\" font-family=\"\" sfmono-regular menlo consolas monospace x=\"320\" y=\"150\">:focus::placeholder<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"320\" y=\"174\">hier wird der Hinweis meist ausgeblendet<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"620\" y=\"56\" width=\"260\" height=\"42\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"636\" y=\"83\">Maxim<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"620\" y=\"122\">ein Wert ist da<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"13px\" font-family=\"\" sfmono-regular menlo consolas monospace x=\"620\" y=\"150\">:not(:placeholder-shown)<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"620\" y=\"174\">die Beschriftung wandert nach oben<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"232\">Der Selektor :placeholder-shown greift, solange das Feld leer ist \u2014 darauf beruht die schwebende Beschriftung<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"258\">und das Hervorheben leerer Felder, ohne eine Zeile JavaScript.<\/text><\/svg><figcaption>Drei Feldzust\u00e4nde und die zugeh\u00f6rigen Selektoren<\/figcaption><\/figure>\n<p>Die schwebende Beschriftung liegt \u00fcber dem leeren Feld und wandert nach oben, sobald Text erscheint. Der ganze Effekt in CSS:<\/p>\n<pre><code>&lt;div class=\"field\"&gt;\n  &lt;input type=\"text\" id=\"name\" placeholder=\" \"&gt;\n  &lt;label for=\"name\"&gt;Ihr Name&lt;\/label&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<pre><code>.field { position: relative; }\n\n.field label {\n    position: absolute;\n    left: 12px;\n    top: 12px;\n    color: #8A8A8A;\n    pointer-events: none;\n    transition: transform .15s ease, font-size .15s ease;\n}\n\n\/* Feld gef\u00fcllt oder im Fokus \u2014 die Beschriftung wandert nach oben *\/\n.field input:not(:placeholder-shown) + label,\n.field input:focus + label {\n    transform: translateY(-22px);\n    font-size: 12px;\n}<\/code><\/pre>\n<p>Das Leerzeichen in <code>placeholder=\" \"<\/code> ist Pflicht: Ohne das Attribut greift <code>:placeholder-shown<\/code> \u00fcberhaupt nicht.<\/p>\n<p>Derselbe Selektor hebt leere Pflichtfelder hervor, und zwar erst, nachdem der Besucher sie ber\u00fchrt hat:<\/p>\n<pre><code>input:required:not(:placeholder-shown):invalid {\n    border-color: #C0392B;\n}<\/code><\/pre>\n<h2 id=\"barrierefreiheit-und-dunkles-design\">Barrierefreiheit und dunkles Design<\/h2>\n<ul>\n<li><strong>Kontrast.<\/strong> Hellgrauer Hinweis auf Wei\u00df ist der klassische Fehler. WCAG verlangt mindestens 4,5:1 f\u00fcr Flie\u00dftext; der Hinweis darf ged\u00e4mpft sein, aber lesbar.<\/li>\n<li><strong>Die Beschriftung nicht der Optik opfern.<\/strong> Verlangt das Design Felder ohne sichtbare Beschriftung, muss sie trotzdem im Markup stehen \u2014 wenigstens als <code>aria-label<\/code>.<\/li>\n<li><strong>Dunkles Design.<\/strong> Legen Sie die Hinweisfarbe als Token fest und \u00fcberschreiben Sie sie in einer Media Query:<\/li>\n<\/ul>\n<pre><code>input::placeholder { color: #8A8A8A; }\n\n@media (prefers-color-scheme: dark) {\n    input::placeholder { color: #9B9B9B; }\n}<\/code><\/pre>\n<ul>\n<li><strong>Nichts Wichtiges in den Platzhalter.<\/strong> Passwortregeln, Datumsformat, Pflichtangaben \u2014 das ist Text neben dem Feld, kein Hinweis, der verschwindet.<\/li>\n<\/ul>\n<h2 id=\"das-wichtigste-in-kurze\">Das Wichtigste in K\u00fcrze<\/h2>\n<p>F\u00fcr die Gestaltung reicht heute <code>::placeholder<\/code>, Vendor-Pr\u00e4fixe braucht nur, wer sehr alte Browser bedient. F\u00fcr Feldzust\u00e4nde gibt es <code>:placeholder-shown<\/code>: darauf beruhen die schwebende Beschriftung und das Hervorheben leerer Felder \u2014 ganz ohne JavaScript. Die Hauptregel bleibt: Der Platzhalter zeigt das Format, die Beschriftung sagt, worum es geht, und keines ersetzt das andere.<\/p>\n<p>Wenn das Formular auf Ihrer Website funktioniert, Besucher es aber auf halbem Weg abbrechen, <a href=\"https:\/\/webmister.pro\/de\/contacts\/\">schreiben Sie uns<\/a> \u2014 wir finden, wo die Anfragen verloren gehen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wie man den Hinweis in Formularfeldern gestaltet: der Selektor ::placeholder, Zust\u00e4nde \u00fcber :placeholder-shown, schwebende Beschriftung, Dark Mode und Barrierefreiheit.<\/p>\n","protected":false},"author":1,"featured_media":12032,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[214],"tags":[],"class_list":["post-12010","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css-de"],"acf":[],"_links":{"self":[{"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/posts\/12010","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/comments?post=12010"}],"version-history":[{"count":0,"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/posts\/12010\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/media\/12032"}],"wp:attachment":[{"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/media?parent=12010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/categories?post=12010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/tags?post=12010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}