Change an input or textarea’s HTML5 placeholder color with CSS

Posted on by in Front End

Have you ever tried to change the input or textarea placeholder color in your page using CSS?

From IE 10+ and with most of the browsers you can do this, using separated rules for each browser (not compatible with Opera):

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

If you have a compatible browser, you see below an input field of type “search” with the text in red:

Written by

Me gusta la tecnología, sea de que tipo sea y a nivel informático tengo bases de programación, pero lo que más me gusta realmente es la parte de frontend, con que trabajo hace ya más de 6 años. Pero ni siempre me gusta estar encerrado, sobretodo en verano, que salgo con la bicicleta, la moto, voy a bucear, a la playa, etc. Intento viajar siempre que puedo, sea en inverno o en verano.Me gusta la tecnología, sea de que tipo sea y a nível informático tengo bases de programación, pero lo que más me gusta realmente es la parte de frontend, con que trabajo hace ya más de 6 años. Pero ni siempre me gusta estar encerrado, sobretodo en verano, que salgo con la bicicleta, la moto, voy a bucear, a la playa, etc. Intento viajar siempre que puedo, sea en inverno o en verano.

No Comments Yet.

Leave a Comment