Vanilla JavaScript Dropdown

How it works

Reads the original <select> element's options (with respect of «selected», if any), creates and attaches the pseudo-select just before the original one, and hides the original.

Upon selection it updates the original <select>, so when you submit your form the value will be there.

JavaScript disabled? No problem! Nicely degrades to original <select>.

— Inspired by the blazing fast, lightweight, cross-platform Vanilla JS framework.

Demo

Click Submit to see the value of the original select changing.
Feel free to look at the source (Ctrl + U) or open the console (F12) to make sure the submitted data retrieved from the original select element.

Download

Available on GitHub and npm

Installation

1. Include the script

   <script src="path/to/vanilla-js-dropdown.min.js"></script>

   or install it from npm

   npm i vanilla-js-dropdown

   A simple usage example can be found in this code playground.
2. Include the CSS (feel free to edit it or write your own)

   <link rel="stylesheet" href="path/to/vanilla-js-dropdown.css">

3. Write your select

   <select id="color-select" name="color">
       <optgroup label="Red colors">
           <option value="indianRed">IndianRed</option>
           <option value="salmon">Salmon</option>
           <option value="crimson">Crimson</option>
       </optgroup>
       <optgroup label="Green colors">
           <option value="chartreuse">Chartreuse</option>
           <option value="seagreen">SeaGreen</option>
           <option value="olive">Olive</option>
       </optgroup>
       <optgroup label="Blue colors">
           <option value="aqua" disabled>Aqua</option>
           <option value="steelblue">SteelBlue</option>
           <option value="royalblue">RoyalBlue</option>
       </optgroup>
   </select>
   

4. Initialize the select

   var select = new CustomSelect({
       elem: "color-select",  // id of the original select element
   });
   
   // Open the select
   select.open();

Options

Methods

Licence