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.

2 CommentiDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *

Alberto, puoi utilizzare le pseudo-classi nth-child per identificare e formattare gli elementi in modo esatto senza tra l'altro toccare il codice HTML

Daniele Buscioni
Daniele Buscioni

Io ho messo il css così e sembra funzionare: ::-webkit-input-placeholder {...} /* Chrome/Opera/Safari */ ::-moz-placeholder {...} /* Firefox 19+ */ :-ms-input-placeholder { ...} /* IE 10+ */ Volevo anche sapere una cosa: mettiamo che ho 2 campi con 2 placeholder e li voglio colorare uno diverso dall'altro, come imposto il css?

Alberto
Alberto