A Lightweight JavaScript Library for Defining Custom HTML Select

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 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>
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 isDisabledClassisOpenClass

openerClass: 'custom-select-opener'

panelClass: 'custom-select-panel'

optionClass: 'custom-select-option' may have isSelectedClasshasFocusClass

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.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…