Über die Jahre haben wir jetzt schon Glück mit unseren Webseiten gehabt… Wir können immer besser und genauer unsere Webseiten layouten und den Wünschen der Benutzer anpassen. Was einige noch nicht kennen ist, dass wir bei Formularfeldern den Platzhalter auch mit einem Stil versehen können.
Dies ist, wenn man es weiß, ganz einfach. Du brauchst dazu das Pseudoelement ::placeholder, dem du einen Stil in deiner css-Datei zuordnest.
::placeholder {
color: rgba(0, 0, 0, .75);
font-size: 1rem;
}
Im Allgemeinen funktioniert das schon sehr gut, aber für manche Browser musst du trotzdem die Vendor-Präfixe zusätzlich definieren. Dein Stylesheet sollte dann so aussehen um die Schrift hellgrau einzufärben und die Schriftgröße für (fast) alle Browser festzulegen.
::-webkit-input-placeholder {
color: rgba(0, 0, 0, .75);
font-size: 1rem;
}
::moz-placeholder {
color: rgba(0, 0, 0, .75);
font-size: 1rem;
}
::ms-input-placeholder {
color: rgba(0, 0, 0, .75);
font-size: 1rem;
}
::placeholder {
color: rgba(0, 0, 0, .75);
font-size: 1rem;
}
