Cómo añadir estilos al placeholder de un input con CSS3

martes, octubre 29, 2013
COMPARTE EL POST

placeholder-css3Ahora que estaba rediseñando el blog me surgió la necesidad de darle estilo al placeholder, ya que por defecto el color que maneja es un gris medio claro, lo cual a mi no me sirve ya que el fondo del blog es azul y quería que el input fuera un tanto transparente. No sabía que se podía modificar el estilo a un atributo, así que decidí investigar y resulta que si se puede.

Y fue que encontré la solución, así que en este tutorial vamos a ver cómo añadir estilos al placeholder de un input con CSS3, es tan sencillo y a la vez un tanto extraño ya que como tal no se me había ocurrido pensar en cómo darle un estilo a un atributo.

Resultado final

See the Pen tDsmi by Marcos Rivas R (@marcosrivasr) on CodePen

Mi idea es simple. Quería que todo mi input fuera transparente, y cuando el usuario escribiera en el se tornará la opacidad a 1. El problema no era ese, en realidad era que si yo le agregaba un placeholder y le colocaba un fondo blanco transparente el gris del placeholder hacía que no tuviera buena combinación visual con el azul de fondo, no se podía leer nada y eso es muy malo para la accesibilidad del usuario.

Fue cuando encontré que podemos accesar al atributo placeholder desde CSS3 y aquí está el ejemplo:

Un pequeño secreto que existía por ahí con CSS, pero pues que estoy seguro que a más de uno le va a llegar la necesidad de cambiarle el estilo al placeholder y no pueda hacerlo.

¡Síguenos en Twitter!


Deja tu comentario