github.com/zoltantothcom/vanilla-js-dropdown

Vanilla JavaScript Dropdown - replacement for <select>

Tiny (0.7 KB gzipped!) JavaScript replacement for <select> that makes styling easy and consistent.

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

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

Demo

CODE PLAYGROUND

Detailed description and usage example

DROPDOWN

Options

Option	Required	Description
elem	yes	id of the select you want to replace or a direct DOM element
bubbles	no	Boolean indicating whether the change event of the select bubbles

Methods

Method	Description
.toggle()	Opens the select if closed and vice-versa
.close()	Closes the select
.open()	Opens the select

Usage example

var select = new CustomSelect({
  elem: 'select',
});

// open it for the user
select.open();

Running the tests

npm test

Browser support and dependencies

Browser	Support	Dependencies
Chrome	yes	-
Firefox	yes	-
Safari	yes	-
Opera	yes	-
Edge	yes	-
IE	yes*	Polyfill for .classList in IE9, Polyfill for CustomEvent in IE9+

* IE9 and up

Versioning

This project uses SemVer for versioning. For the versions available, see the tags on this repository.

License

Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

See Unlicense for full details.

Related

• Vanilla JavaScript Carousel
• Vanilla JavaScript Tabs
• Vanilla JavaScript Tooltip
• Vanilla JavaScript Accordion