Come modificare lo stile dei placeholder tramite css3

HTML5 ha aggiunto alcune nuove funzionalità per i campi di testo input e textarea. Una di queste funzionalità si ispira alla casella di ricerca di Safari: placeholder. Questa funzionalità aggiunge un testo predefinito se il campo di testo è vuoto.

Di default l’attributo CSS placeholder ha una colorazione grigio/chiara e una dimensione standard. Ecco come modificare il tag. In questo tutorial vediamo come cambiare colore al testo del nuovo tag HTML5 placeholder grazie all’uso dei nuovi stili CSS3. Questo trucco è essenziale se volete dare un tocco di unicità ai vostri progetti.

Utilizzando gli appositi selettori CSS3 potremo attuare le modifiche al colore del testo dei placeholder in modo che siano compatibili con tutti i browser senza problemi (questa pratica non funziona con ie8 e precedenti). Oltre al colore del testo possiamo anche definire una dimensione standard del testo a seconda delle vostre necessità.

Questo è puro HTML5 e CSS. Quello che si dovrebbe vedere è il testo in grigio per i placeholder (a destra) e normale testo nero per la label (a sinistra).

NOTA: Il tag placeholder funziona in Webkit, Firefox, Chrome e Safari mentre NON è compatibile con IE10(e inferiori) ed Opera.

Modifica placeholder tramite CSS3

Codice

Esempio