Wenn ihr eine HTML-TextBox habt, könnt ihr verschiedene Sachen mit dem Placeholder machen. Hier ein paar Beispiel:

Placeholder definieren

Zuerst einmal ein Beispiel wie man überhaupt einen Placeholder definiert:

 <input type="text" placeholder="Ich bin ein Platzhalter">

Wird der Placeholder angezeigt?

Wollt ihr abhängig davon ob der Placeholder oder ein Text-Wert angezeigt wird, die TextBox stylen, könnt ihr das mittels CSS-Pseudoklasse :placeholder-shown machen.

Use Cases sind z.B.:

  • Ihr wollt dem Nutzer bei einem Tabellen-Filter anzeigen, das eine Texteingabe gemacht wurde
  • Oder die TextBox ausgrauen, weil nichts eingegeben wurde

Hier ein Beispiel:

.search-filter {
    border: 2px solid blue;
}

.search-filter:placeholder-shown {
    border: 1px solid gray;
}

Placeholder-Text stylen

Den Placeholder-Text selber könnt ihr auch direkt mittels CSS-Pseudoelement stylen. Unterstützt werden aktuell diese Eigenschaften:

  • background
  • color
  • font
  • letter-spacing
  • line-height
  • opacity
  • text-decoration
  • text-indent
  • text-transform
  • vertical-align
  • word-spacing

Hier ein Beispiel:

.search-filter::placeholder {
    color: red;
    font-weight: bold;
}

Browserkompatibilität

Die aktuellen Browser unterstützen die oben vorgestellten Techniken ohne Probleme. Aber ältere Browser brauchen ggf. noch die Vendor-Prefix:

::-webkit-input-placeholder { ... } /* WebKit, Edge */
:-moz-placeholder { ... } /* Firefox 4-18 */
::-moz-placeholder { ... } /* Firefox 19+ */
:-ms-input-placeholder { ... } /* IE 10-11 */
::-ms-input-placeholder { ... } /* Edge */