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

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:

Twitter

Linkedin

Facebook

0

Artículos Recomendados:

1. Nuevos tipos de input en HTML5

• Bitcoin
• Ethereum
• Bitcoin cash
• Tether
• Stellar

Bitcoin!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin

COPY

Ethereum!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Ethereum. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Ethereum

COPY

Bitcoin cash!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin cash. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin cash

COPY

Tether!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Tether. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Tether

COPY

Stellar!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Stellar. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Stellar

COPY

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

1. KRob22 dice:

   septiembre 11, 2017 a las 1:23 pm

   Gracias gracias!! estaba buscando esto

2. noriel dice:

   octubre 19, 2018 a las 3:11 am

   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;
   }