Custom Dropdown Select In Pure JavaScript – custom-select

Category: Form | May 30, 2018
Author: custom-select
Views Total: 2,489
Official Page: Go to website
Last Update: May 30, 2018
License: MIT

Preview:

Custom Dropdown Select In Pure JavaScript – custom-select

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

You Might Be Interested In:


Leave a Reply