Logotipo de Xitrus.
sígueme en facebook

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
04
6

Personaliza el Placeholder en tus formularios

El atributo Placeholder es el encargado de añadir un pequeño texto en un formulario antes que escribamos, que se suele usar para especificar como debemos de rellenar el campo o con que datos.
Según el navegador se muestra con el color original del campo del formulario o con un color gris claro, y eso es algo que podemos modificar a nuestro antojo con CSS en la mayoría de los navegadores que lo soportan.

Ejemplo de placeholder con color cambiado.

Para cambiar el estilo de los placeholders tenemos unos selectores, que varían según el navegador, y nos permiten cambiar las propiedades del texto, ya sea su color, su sombreado, tamaño y demás.
Este selector es admitido por los principales navegador siempre y cuando usemos los selectores específicos para cada uno de ellos.

Puesta en marcha

Este selector no tiene un estándar, por lo que por el momento debemos de usar los selectores propietarios. Estos selectores se pueden aplicar a todos los campos de formulario o aplicarlo a formularios específicos.

  1. ::-webkit-input-placeholder{
  2. color:#00AEDB;
  3. }
  4. :-moz-placeholder{ /* Firefox 18- */
  5. color:#00AEDB;
  6. }
  7. ::-moz-placeholder{ /* Firefox 19+ */
  8. color:#00AEDB;
  9. }
  10. :-ms-input-placeholder{
  11. color:#00AEDB;
  12. }

Y también lo podemos aplicar a cualquier campo específico marcándolo con este selector a los elementos input o textarea que queramos modificar el color de sus placeholders.

  1. input.rojo::-webkit-input-placeholder{
  2. color:#D11141;
  3. }
  4. input.rojo:-moz-placeholder{ /* Firefox 18- */
  5. color:#D11141;
  6. }
  7. input.rojo::-moz-placeholder{ /* Firefox 19+ */
  8. color:#D11141;
  9. }
  10. input.rojo:-ms-input-placeholder{
  11. color:#D11141;
  12. }

Resumen

Si usamos por algún motivo el atributo placeholder es esencial conocer este selector, para así poder cambiar a nuestro antojo su color y sobre todo porque en navegadores como Internet Explorer coge el color que tiene el texto, no como en otros navegadores que lo cambia a un gris claro, lo que hace que confunda a la persona que lo vea.



Comentarios

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
Cerrar sesión
Usuario: Contraseña: