HTML5: Editar el css de Placeholder

Hace poco fui a una conferéncia sobre HTML5 en la que se explicaban los cambios, las novedades y la actitud de los pesos pesados en estos temas. La parte que me pareció más interesante fue la de formularios.

Una de las cosas que explicaron fué el uso de placeholder, un atributo para los campos de texto que lo que hace es mostrar un texto cuando el input no tiene valor, pero ese texto no representa ningún valor y es sólo para ayudar al usuario. Por si no me explico, una captura:

Por defecto el placeholder tiene un color, que indica el navegador y suele ser gris. En cuanto al grosor, espaciado, color, etc, asumirá que usa el mismo que el texto normal (sea o no definido en css). Si se quieren cambiar estos estilos se puede utilizar este pequeño snippet que he encontrado por ahí.

No lo he probado con diferentes navegadores. Pero en la fuente se indica que es compatible con Webkit (Chrome y Safari) y con Firefox (a partir de la versión 4).
input::-webkit-input-placeholder {
    color:    #c00;
    font-weight: bold;
}
input::-moz-placeholder {
    color:    #c00;
    font-weight: bold;
}

Y el formulario quedaría así:

A ver si me acuerdo más adelante y escribo algo sobre los type range.




Josep Viciana

Programador de 29 años con una década de experiencia como programador. interesado en el diseño, ilustración y nuevas tecnologías. Dedicado desde siempre a la programación Web y desde hace algunos años también a la móvil.

13 comentarios

Buenas tardes, tengo una duda
Estoy usando una hoja de estilos para dos formulario de diferentes pagina, la cosa es que el placeholder de un formulario es gris porque el formulario es fondo blanco en cambio el otro formulario es azulmarino y quiero que el placeholder sea blanco, me ayudan?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.