Come cambiare colore al testo dei placeholder con i CSS3

Nell’appunto digitale di oggi vediamo come cambiare colore al testo del nuovo tag HTML5 Placeholder grazie all’uso dei nuovi stili CSS3.
Questo trick è essenziale se volete dare un tocco di unicità ai vostri progetti.

[button link=”http://www.targetweb.it/tutorial/2013/cambiare-colore-placeholder/index.html” color=”blue” target=”blank” size=”large”]Demo[/button]

Ecco i codici CSS3 per colorare il testo all’interno del placeholder:

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

Come vedete ho usato degli appositi selettori CSS3 per rendere attive le modifiche al colore del testo dei placeholder in modo che siano compatibili con tutti i browser senza problemi (ovviamente questa pratica non funziona con ie8 e precedenti).

Questo articolo ti è stato utile? Scopri il nostro archivio di appunti digitali e condividi questa pagina sui social network!