L'attributo placeholder permette di inserire un breve suggerimento che descrive il valore atteso di un campo di input (ad esempio, un valore di esempio o una breve descrizione del formato previsto), ma anche di una textarea.
Il suggerimento viene visualizzato nel campo di immissione prima che l'utente inserisca un valore e sparisce quando l'utente inizia a digitare.
Nota: L'attributo placeholder funziona con i seguenti tipi di ingresso: text, search, url, tel, e-mail e la password.
E' semplicissimo da utilizzare:
<input type="text" id="nome" placeholder="digitare il nome"
|
naturalmente è possibile modificare le caratteristiche stilistiche del placeholder sfruttando i css:
/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
/* individual: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; } |