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

Ahora 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.