Custom Select is a lightweight JavaScript library for creating and managing custom HTML <select>. Dependencies are not needed.

• Base
• Bootstrap
• Control buttons
• GSAP
• jQuery
• Mobile Touch Devices

How to make use of it:

1. Install and import custom select.

# NPM
$ npm install custom-select --save

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

2. Or include compiled JavaScript and CSS files on the page.

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

3. Initialize the library on a normal select element.

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

const mySelect = customSelect("select");

4. Default parameters (CSS classes). Useful for creating your own styles for the drop-down menu.

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"
});

Structure Classes

Self-explained structure classes, and relative may-have status classes:

containerClass: 'custom-select-container' may have isDisabledClass, isOpenClass

openerClass: 'custom-select-opener'

panelClass: 'custom-select-panel'

optionClass: 'custom-select-option' may have isSelectedClass, hasFocusClass

optgroupClass: 'custom-select-optgroup'

State Classes

isSelectedClass: 'is-selected' – when the custom option is selected (as a native selected attribute).

hasFocusClass: 'has-focus' – when the custom option has current focus (mouseover, arrow navigation, and keyboard autocomplete changes the focus).

isDisabledClass: 'is-disabled' – when the select is disabled.

isOpenClass: 'is-open' – when the panel is open.

custom dropdown select in pure javascript, custom-select Plugin/Github

See Demo And Download

Official Website(custom-select): Click Here

This superior jQuery/javascript plugin is developed by custom-select. For extra advanced usage, please go to the official website.