¿Necesitas Maquetar o Diseñar una web? ... Consulta nuestra sección Maquetación Freelance o solicita presupuesto a elmaquetadorweb@gmail.com

23.2.15

Cómo crear 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.

5 comentarios:

  1. Acabo de descubrir la web por un enlace que me llego desde Linkedin.

    Una duda, este select personaliado es responsive? Creo que no, pero tampoco puedo asegurarlo por eso lo pregunto.

    P.D. A lo del tema me parece que podría estar un poco mejor explicado, para una persona que ya sepa como hacerlo no hay muchas dudas, pero para alguien que no quedan muchas y si alguien ya lo sabe pues eso que quedan muchas dudas, podria estar mejor explicado.

    ResponderEliminar
  2. Hola, comentarte que el select es responsive. Si te fijas las clases .cajaselect y ul.listaselect tienen el width: 100%;

    Lo que es importante del post es el código que hemos puesto en codepen (http://codepen.io/pedromarin/pen/YPvdEL).

    Si te lees la explicación con el código delante seguro que se entenderá mejor.

    ResponderEliminar
  3. A mí no me funciona, inspeccionando el elemento encuentro Uncaught ReferenceError: $ is not defined, eso me señala la función $(document).ready(function() {. ¿Qué hago?

    ResponderEliminar
    Respuestas
    1. Ese error seguramente es porque no has enlazado el archivo de la librería jquery en el documento html

      En la página de codepen no se ve el archivo enlazado directamente porque no aparece en el código, sino pulsando un botón de opciones que hay arriba a la izquierda en cada bloque de código.

      Eliminar
  4. Excelente aporte me sirvio mucho

    ResponderEliminar