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 Twitter
Twitter
0Share on LinkedIn
Linkedin
Share on Facebook
Facebook
0Share on Google+
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.

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

  1. KRob22 dice:

    Gracias gracias!! estaba buscando esto

  2. noriel dice:

    El problema al cambiar el color, es que por alguna razón no cambia, la solución que encontré fue poner el atributo !important despues de la instrucción, lo menciono, por si quieren actualizar el post, y darle un nivel mas de profundidad.
    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: black !important;/*!Important sirve para dar orden inmediata de cambiar el color*/
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: black !important;
    opacity: 1 /* esto es porque Firefox le reduce la opacidad por defecto */;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: black !important;
    opacity: 1;
    }
    :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: black !important;
    }

Dejar un comentario