Im letzten Eintrag ging es um den Einsatz von HTML5 Placeholdern und eine jQuery Fallbackmöglichkeit. Heute will ich euch kurz und kann zeigen, wie ihr den Placeholdertext anders aussehen lassen könnt als den normalen Input-Text.

Soweit mir bekannt ist, gibt es die Möglichkeit nur für webkit-basierte Browser wie Chrome und Safari und für Firefox.

Die ersten beiden können ganz einfach über folgenden Selektor angesprochen werden.

input::-webkit-input-placeholder {
    color: #bbb;
}

Firefox hat einen ähnlichen Selektor, der wie folgt aussieht.

input:-moz-placeholder {
    color: #bbb;
}

Es ist noch wichtig zu sagen, dass ihr folgendes nicht machen dürft, da ein Browser aufhört den Code zu interpretieren, wenn er eine der beiden Anweisung nicht versteht, die ihr in eine Reihe schreibt.

input::-webkit-input-placeholder,
input:-moz-placeholder {
    color: #bbb;
}

Wusste ich auch nicht und suchte den Fehler irgendwann mal ewig, bis ich dann zu dieser Erkenntnis kam.