CSS Programación

[CSS] Cómo añadir estilos a la pseudoclase placeholder

[titulo]Cambiar el color o el tamaño de un placeholder input de HTML5[/titulo]

HTML5 incorporó muchas novedades, entre ellas la pseudoclase placeholder.

Este elemento, conocido en español como marcador de posición, es una marca de agua que aparece en los campos de entrada de texto, y que explica o ejemplifica qué valor debe introducirse allí:

Placeholder permitió hacer formularios más elegantes, en los que no era preciso poner el valor del campo a parte, sino que podía incorporarse al propio campo de texto.

El problema, como casi todas las novedades, es que el marcador de clase no fue incorporado por todos los navegadores al mismo tiempo.

Hoy día, en todas las versiones modernas, basta con usar la nomenclatura habitual de las pseudoclases, y añadir a nuestro CSS:

input::placeholder {
  color: green;
}

Consiguiendo así modificar todos los placeholders de los input type:

<input placeholder="Escribe algo aquí...">

 

Y para los navegadores antiguos, tendremos que usar las propiedades experimentales :

::-webkit-input-placeholder { /* Chrome */
  color: green;
}
:-ms-input-placeholder { /* IE 10+ */
  color: green;
}
::-moz-placeholder { /* Firefox 19+ */
  color: green;
  opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: green;
  opacity: 1;
}

 

¿Te hemos sacado de un aprieto? ¡Sácanos tú de otro compartiéndonos!

Cristian Sarabia Martínez

Desde que a principios de los 90 mi padre desempolvó su Spectrum, no he dejado de probar y experimentar con la tecnología.

Enamorado del mundo web, Full Stack Developer de profesión y diseñador por devoción.

Ahora hago mis pinitos en esto del blogging para compartir con vosotros un poquito de todo lo que la comunidad me ha dado.

Escribir comentario

Haz clic aquí para dejar tu comentario