Selector múltiple decorado con JavaScript (OOP) y CSS

En este HowTo partiendo de un elemento select (múltiple) de HTML5, creamos un selector múltiple mucho más vistoso y atractivo para el usuario. Para ello usaremos Programación Orientada a Objetos con JavaScript y CSS.

Para comprobar su funcionamiento y su código podéis seguir los siguientes enlaces:

  • La URL para comprobar ejemplos de uso se puede acceder aquí
  • EL código se puede descargar desde Github

Entre las ventajas que tiene usar este tipo de selector podemos destacar:

  1. Evita al usuario tener que usar el selector múltiple de HTML5: estéticamente menos vistoso y que obliga al usuario a pulsar la tecla CTRL para ir seleccionando elementos.
  2. Podemos decorar múltiples selectores en una misma página.
  3. Cambiar su apariencia (fondos, colores, etc …) es una tarea sencilla modificando su hoja de estilos (CSS).

Ejemplo de uso:

 

 

Etiquetado

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.