Custom Dropdown Select In Pure JavaScript – custom-select

Preview:

Description:

custom-select is small and dependency-free JavaScript library helps you create custom, animated dropdown list from the native select element.

How to use it:

Install & import the custom-select.

# NPM
$ npm install custom-select --save

// ES 6
import customSelect from 'custom-select';
// CommonJS:
const customSelect = require('custom-select');

Or include the compiled JavaScript & CSS files on the page.

<link rel="stylesheet" href="custom-select.css">
<script src="custom-select.min.js"></script>

Initialize the library on a normal select element and done.

<select id="example">
  <option value>Select...</option>
  <option value="foo">Foo</option>
  <option value="buzz">Buzz</option>
</select>

const mySelect = customSelect("select");

Default parameters (CSS classes). Useful for creating your own styles for the dropdown list.

const mySelect = customSelect("select",{
      containerClass: "custom-select-container",
      openerClass: "custom-select-opener",
      panelClass: "custom-select-panel",
      optionClass: "custom-select-option",
      optgroupClass: "custom-select-optgroup",
      isSelectedClass: "is-selected",
      hasFocusClass: "has-focus",
      isDisabledClass: "is-disabled",
      isOpenClass: "is-open"
});