Accessible Custom Select Box Plugin With jQuery - Selectivo.js

Selectivo.js is a small and easy jQuery plugin that generates a clean, accessible dropdown list from plain html to replace the default select box.

Features:

• Close selectivo when escape pressed.
• Open selectivo or navigate options when up/down arrows pressed.
• Close selectivo when loosing focus.

How to use it:

1. Add jQuery library and the jQuery Selectivo.js plugin's JS & CSS files into the webpage.

<link rel="stylesheet" href="selectivo.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.selectivo.js"></script>

2. The required html structure for the custom select box.

<span class="selectivo">
  <button type="button" class="selectivo__label"></button>
  <input type="hidden" class="selectivo__input" />
  <span class="selectivo__dropdown">
      <button type="button" value="1" class="selectivo__option">Choice 1</button>
      <button type="button" value="2" class="selectivo__option">Choice 2</button>
      <button type="button" value="3" class="selectivo__option">Choice 3</button>
  </span>
</span>

3. Call the function on the top element to generate a custom select box on the webpage.

$('.selectivo').selectivo();

---

This awesome jQuery plugin is developed by tzi. For more Advanced Usages, please check the demo page or visit the official website.