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

12 comentarios

Hola tengo un problema y es que quiero cambiar los css de una pagina que se esta haciendo en .net con hatml5 y jquery pero por mas que trato no me sale me pudieran decir paso a paso como hacer esto es que no logro que coja los nuevos css

para firefox existe un error. Faltan dos puntos (:) depués de input
#INCORRECTO
input:-moz-placeholder {
color: #c00;
font-weight: bold;
}

#CORRECTO
input::-moz-placeholder {
color: #c00;
font-weight: bold;
}

Excelente aporte, si se desea agregar a una clase creada se puede poner asi:

.(nombredelaclase) input::-webkit-input-placeholder {
    color:white;
}

Saludos

cuando pongo el weight en bold, me lo deja igual de transparente y yo no quisiera que fuese opaco sino mas nitida el texto dentro del placeholder. Alguien sabe como arreglarlo?

Deja un comentario

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