Accessible and Modern Select Dropdowns with iselect

Preview:

Description:

iselect is a lightweight JavaScript library that transforms standard HTML <select> elements into fully customizable, accessible, and smarter dropdowns.

It boasts features like full style customization, dark mode support, keyboard navigation, automatic positioning, animated dropdown carets, and custom labels, all without relying on any other libraries.

How to use it:

1. Download the library and include it in your HTML document.

<script src="/dist/iselect.min.js"></script>

2. Add the iselect class to your existing <select> elements. The library will automatically convert these elements into custom dropdowns:

<select class="iselect">
  <option value="" disabled selected>Select a language</option>
  <option value="1">JavaScript</option>
  <option value="2">Python</option>
  <option value="3">C++</option>
</select>

3. Customize the dropdown label using the data-label attribute:

<select class="iselect" data-label="Select a language">
  <option value="" disabled selected>Select a language</option>
  <option value="1">JavaScript</option>
  <option value="2">Python</option>
  <option value="3">C++</option>
</select>

4. For projects utilizing ES Modules, you can import and initialize ‘iselect’ like this:

import { Iselect } from "iselect";
const selects = document.querySelectorAll("select");
selects.forEach((select) => {
  new Iselect(select);
});