Estilo placeholder con css

Cambiar el estilo del placeholder con css es uno de esos pequeños detalles que le dan otro punto a favor a los formularios de nuestra página Web, y a fin de cuentas, a todo el sitio entero, ya que siempre es un detalle ofrecer una personalización que no se muestra en otras Webs, sean o no de la competencia.

Para quien no sepa lo que es el placeholder, se trata de ese texto que aparece en alguno de los campos de un formulario, y que se desvanece cuando empezamos a escribir texto en el campo en cuestión. Puedes encontrar algo más de información, en inglés, en la siguiente página de w3schools.

Cómo cambiar el estilo placeholder con css

Como no podía ser de otro modo, cada navegador ofrece su propio modo de dar estilo al placeholder de los campos de un formulario. El código css que habría que utilizar sería el siguiente:

Este sería el código necesario para personalizar el estilo placeholder con css en Chrome, Firefox e Internet Explorer respectivamente.

El resultado del código anterior, sería el de modificar el texto al color RGB indicado, con un tamaño de fuente de 16px, una fuente Arial, y un grosor de texto negrita.

Voy a aplicar el código anterior al campo del formulario a continuación para poder ver cómo afecta dicho código a nuestra Web.

Como podéis observar, he cambiado el estilo del placeholder a un azul de grosor negrita en Arial a 16px. Jugando con los estilos CSS se puede establecer el que se deseé.

Cambiar el estilo placeholder con css avanzado

El código anterior cambiará todos los placeholder de la página que se esté visualizando, pero podemos especificar el cambio al placeholder de un solo input, lo cual se consigue añadiendo la clase o el id de los inputs que queramos que se vean afectados.

Por ejemplo, para el caso del navegador Mozilla, un ejemplo sería el siguiente:

Los input a continuación tienen los id #input-189-2 e #input-189-3, de modo que al primero de ellos le aplicaré un tono rojo y al segundo uno verde, como se ve en la siguiente ilustración:

A continuación puedes ver el resultado: