Cómo cambiar el color del marcador de posición con CSS

Mateo G. -

Problema: Personalización del color del texto de marcador de posición

El texto de marcador de posición en los campos de formulario suele aparecer en un color gris claro predeterminado. Esto puede no siempre coincidir con el diseño de un sitio web. Cambiar este color puede mejorar la coherencia visual y la accesibilidad. Sin embargo, requiere técnicas específicas de CSS.

Técnicas CSS para Cambiar el Color del Marcador de Posición

Uso de Pseudo-elementos

El pseudo-elemento ::placeholder es la forma estándar de dar estilo al texto del marcador de posición. Se dirige al texto del marcador de posición en los campos de formulario. Aquí tienes un ejemplo:

::placeholder {
  color: #999;
}

Este método funciona en la mayoría de los navegadores modernos. Verifica la compatibilidad del navegador al usar esta técnica.

Ejemplo: Contraste del Marcador de Posición

Asegúrate de que el color del marcador de posición tenga suficiente contraste con el fondo del campo de entrada para una mejor legibilidad. Usa herramientas como el Verificador de Contraste de WebAIM para comprobar la relación de contraste.

Pseudo-clases y Pseudo-elementos Específicos de Navegadores

Para un soporte más amplio de navegadores, es posible que necesites usar selectores específicos de proveedores:

  • ::-webkit-input-placeholder para navegadores WebKit (Chrome, Safari, versiones más recientes de Opera):
::-webkit-input-placeholder {
  color: #999;
}
  • ::-moz-placeholder para Mozilla Firefox:
::-moz-placeholder {
  color: #999;
  opacity: 1;
}

Nota: Firefox aplica una opacidad al texto del marcador de posición por defecto. Establecer opacity: 1 muestra el color como se pretende.

  • :-ms-input-placeholder para Internet Explorer y Edge:
:-ms-input-placeholder {
  color: #999;
}