CSS - Placeholder opmaken


Met HTML5 werd het attribuut Placeholder ge´ntroduceerd, een handige en simpele manier om tekst te plaatsen in een veld van een formulier. Op deze manier kun je duidelijker aangeven wat er in het veld geplaatst moet gaan worden. Een voorbeeld van een dergelijkte tekst in een veld zie je hieronder. De tekst verdwijnt zodra je begint met typen.

De browsers die het attribuut ondersteunen zijn Internet Explorer 10+, Google Chrome, Firefox, Opera en Safari. Internet Explorer 9 en ouder ondersteunen het attribuut niet.

Deze vooraf ingevulde tekst kan met CSS verder opgemaakt worden, dit gaat met de onderstaande code. Zo stel je dan bijvoorbeeld een andere kleur in of maak je de tekst vet.

::-webkit-input-placeholder {
        font-style:italic;
}

::-moz-placeholder {
        font-style:italic;
}

:-ms-input-placeholder {
        font-style:italic;
}


Een voorbeeld met opmaak zie je hieronder.