Dando estilos a placeholder

23/oct/2013 3

Con HTML5 llegaron muchas nuevas etiquetas y atributos, y se nota que en la W3C se esforzaron en la captura de datos. Los formularios tuvieron muchas mejoras y en este artículo mostraré como manipular un útil atributo: placeholder.

Placeholder permite integrar un texto predefinido dentro de un campo de texto (<input>). En general este texto ya tiene un estilo según el browser que utilizamos y se acomoda a utilizar este estilo preexistente:

Pero hay una propiedad CSS -propietaria- que permite cambiar el estilo al texto que ingresas a través de placeholder:

input::-webkit-input-placeholder {
color: red;
}
input:-moz-placeholder {
color: red;
}
input:-ms-input-placeholder {
color: red;
}

Comentarios

  1. Javier [#]

    Buen articulo!
    Por si ayuda acá aporte a una librería de mixins en SASS que ayuda a dar estilos a placeholders y entre otras cosas mas.

    https://github.com/web-design-weekly/sass-mixins

  2. liaaa [#]

    y cómo le cambias el color al atributo value??? (‘texto ingresado con value’)

Deja tu Comentario

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

CSSLab