htmlcinco

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

Cómo cambiar el color del placeholder de un input en HTML5

Cómo cambiar el color del placeholder de un input en HTML5

El atributo placeholder introducido en HTML5 sin dudas nos provee un forma muy fácil de mostrar el texto previo de un input, y es demasiado fácil de recordar como usarlo, sin embargo, no es tan fácil de recordar cómo aplicarle estilos.

El siguiente código CSS funciona en todos los navegadores, pero necesitamos una propiedad para cada uno:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #ccc;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #ccc;
   opacity: 1 /* esto es porque Firefox le reduce la opacidad por defecto */;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #ccc;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #ccc;
}

Espero te haya sido de utilidad.

Comparte conocimiento:
Tweet about this on Twitter12Share on LinkedIn1Share on Facebook3Share on Google+0
¿Quieres saber más?
¡Suscríbete a nuestro newsletter!

Respetamos tu privacidad y tu tiempo, no recibirás ningún tipo de correo basura.

Un comentario para “Cómo cambiar el color del placeholder de un input en HTML5”

  1. KRob22 dice:

    Gracias gracias!! estaba buscando esto

Dejar un comentario