Cómo crear un Select personalizado

En ocasiones nos pueden pedir modificar atributos que no se pueden cambiar a través de código CSS, como por ejemplo alterar el color del elemento seleccionado de un <select>.

Para solucionarlo, en esta ocasión vamos a crear un select de forma manual, desde cero.

La técnica consiste en crear una lista <ul> como sustituto del elemento <select>, en la cual los elementos <li> harán las funciones de los elementos <option> del <select> y añadimos un <span> para recoger el valor de la opción seleccionada. Por último hay que ocultar la lista para que aparezca como un select replegado:

Cuando hagamos click en nuestro div, con la clase cajaselect, tendremos que mostrar la lista desordenada a través de jQuery, ya que antes de pulsar se encuentra oculta. También hay que decirle que, una vez mostrada la lista, cuando pulsemos cualquier elemento dentro de ella, se vuelva a cerrar, y nos deje seleccionado el texto de la opción elegida. El icono con el triángulo (lo hemos hecho con CSS aunque también podemos poner una imagen) que también cambiará al pulsarlo.

See the Pen YPvdEL by Pedro Marín (@pedromarin) on CodePen.

Por último comentaros que al cambiar un select por cualquier otro elemento se pierde la accesibilidad, por lo que os dejamos este enlace con una lista de select personalizados accesibles.