Como cambiar el color de fondo del placeholder de un imput con 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; }