Mejoras en la legibilidad de los elementos select en devlog-ist/landing

Introducción

El proyecto devlog-ist/landing se centra en la creación de una página de aterrizaje efectiva y visualmente atractiva. Recientemente, se ha trabajado en mejorar la legibilidad de los elementos <select>, asegurando una mejor experiencia de usuario, especialmente en la página de reclutadores.

El Desafío

Originalmente, el estilo de los elementos <select> presentaba problemas de legibilidad en ciertos contextos, particularmente en la página de reclutadores. El color de fondo predeterminado para las opciones del menú desplegable #locale-select dificultaba la lectura de las opciones seleccionadas, afectando la usabilidad general.

La Solución

La solución implementada consistió en ampliar la regla CSS que define el color de fondo de las opciones de los elementos <select>. En lugar de aplicar el estilo únicamente al selector #locale-select, se aplicó a todos los elementos <select>, garantizando que los menús desplegables de tecnología y nivel también se beneficiaran de esta mejora de legibilidad.

select {
  background-color: #f0f0f0; /* Un color de fondo claro para mejorar la legibilidad */
  color: #333; /* Color del texto para asegurar contraste */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

Este ajuste CSS asegura que todos los elementos <select> en la página tengan un fondo claro y un color de texto contrastante, facilitando la lectura de las opciones.

Resultados

• Mayor legibilidad de las opciones en los menús desplegables.
• Experiencia de usuario mejorada en la página de reclutadores.
• Consistencia visual en todos los elementos <select> de la página.

Lecciones Aprendidas

Es crucial asegurar que los estilos CSS sean lo suficientemente generales para cubrir todos los casos de uso relevantes. A veces, restringir los estilos a selectores específicos puede generar inconsistencias visuales y problemas de usabilidad en otras partes de la aplicación. La reutilización de estilos y la aplicación de reglas generales bien pensadas contribuyen a un diseño más coherente y una mejor experiencia de usuario.