Formattare i placeholder con i CSS

Un nuovo attributo portato in dote da HTML5, il placeholder, offre la possibilità di inserire un valore predefinito in un campo input di un form. In questo modo l'utente otterrà un suggerimento iniziale sul potenziale contenuto da inserire nel campo.

Vediamo come si usa il placeholder e come può essere facilmente formattato tramite sintassi CSS. Cosa cambia rispetto al vecchio attributo value? Anche se in apparenza placeholder e value ottemperano allo stesso scopo, il placeholder ha una maggiore valenza semantica. Come dice la parola stessa, esso è un segnaposto in attesa di essere valorizzato in via definitiva. Il value invece offre un contenuto vero e proprio in partenza, come se qualcuno lo avesse scritto in anticipo per noi.

Ci accorgeremo della leggera differenza cliccando dentro il campo con l'attributo placeholder: alla prima lettera digitata vedremo scomparire il testo segnaposto a vantaggio del nostro testo. In presenza di un attributo value invece dovremo cancellare il contenuto e riscriverci sopra, a meno di utilizzare qualche semplice funzione JavaScript di replace.

Ecco un esempio di codice HTML:
<input type="text" name="indirizzo" placeholder="Inserire via, numero civico e cap">

Per formattare il testo del placeholder potremo utilizzare la pseudo-classe CSS input-placeholder in questo modo:
::-webkit-input-placeholder { color: #166399; font-style:italic;}
::-moz-input-placeholder { color: #166399; font-style:italic;}
::-ms-input-placeholder { color: #166399; font-style:italic;}

I 3 prefissi proprietari sono purtroppo indispensabili in quanto nessun browser riuscirebbe altrimenti ad eseguire il corretto rendering. In questo modo invece il supporto è garantito pressoché ovunque, ad eccezione degli obsoleti IE8 e IE9.