Select Nativo vs Custom Select - Modificar aspecto visual de un select nativo - Dar estilos al elemento select

En la última web que nos encargaron maquetar, nos encontramos con el famoso problema de cambiar los estilos al elemento HTML <select> con el fin de clavar el diseño recibido.

Las técnicas para realizar esta tarea suelen consistir en ocultar el <select> y reemplazarlo por otro elemento o directamente utilizar una lista <ul> como vimos en nuestro artículo cómo crear un select personalizado.

Utilizar estas técnicas dificulta el desarrollo del proyecto y conlleva penalizaciones de tiempo y usabilidad que a nuestro entender son muy graves y pasamos a detallar:

- Se pierde la funcionalidad de un <select> nativo en móvil. Además vamos a tener que hacerlo responsive.

- Hay que validarlo a mano,  perdemos las opciones de required, disabled y autofocus.

- Se pierde la Accesibilidad. No decimos que no se pueda hacer, sino que hay que encargarse de la accesibilidad implementando roles de ARIA como listbox role, combobox role ...

En resumen, es difícil de mantener y de usar. Además, añade código HTML y Javascript innecesario.

Pues bien estamos en 2019 y podemos decir que que las cosas han cambiado.

Buscado información hemos encontrado este artículo llamado diseñando un select en 2019 de Scott Jehl (creador del logo de jQuery, lideró el desarrollo del framework jQuery UI y jQuery Mobile). En dicho artículo nos dan una solución consistente para todos los navegadores incluyendo a Internet Explorer 10, como podemos comprobar en su web de ejemplo.

El único inconveniente que vemos es la imposibilidad de dar estilos a los elementos <option>, lo cual no nos parece tan grave como para dejar de utilizar los <select> nativos.

Os hemos dejamos el resultado en nuestro CodePen

See the Pen
Modificar aspecto visual de un select nativo - Dar estilos al elemento select by Pedro Marín (@pedromarin)
on CodePen.