cssSelect

Keyboard-aware custom <select> dropdown boxes without inline styles. UMD-compatible – for your <script> tag with jQuery on the page, AMD module loader, or CommonJS.

Keep your dropdown styling in the stylesheet(s).

Introduction

cssSelect takes an existing <select> as its argument and generates the following markup by default:

<div class="select name-{original-select-name}">
  <a class="selected" data-option-value="{selected option value}">
    <span class="text">{selected option text}</span>
    <span class="handle"></span>
  </a>
  <ul>
    <li data-option-value="{original first option value}">{original first option text}</li>
    <li data-option-value="{original second option value}" class="selected">{original second option text}</li>
    <li data-option-value="{original third option value}">{original third option text}</li>
  </ul>
</div>

The example above shows the second of three options being selected, hence the class selected on the second item in the list.

This markup is placed adjacent to the original <select> in the DOM tree. The original <select> is also given the class hidden.

It's probably ideal to place the select off-screen at this point with some CSS, e.g.:

.hidden {
  text-indent: -999em;
}

You'll also want to style the new .select on the page - cssSelect's philosophy is that it should not add any inline-styling to elements on the page. all of that stuff should stay in stylesheet(s) so that it's easy to modify and override.

Usage

cssSelect can be used as a jQuery plugin:

$('select#customizable-select').cssSelect();

If you're using some kind of module-loader, it is also exposed as a standalone function:

var cssSelect = require('jquery.cssselect');
cssSelect('select#customizable-select');

CommonJS-style module loader pictured above, but the same should work for an AMD-style loader.

Using a module loader allows you to hide the jQuery dependency, so your module that depends on cssSelect will be able to operate without declaring jquery as a dependency in that module.

Contributing

Write issues/submit pull requests. I'm very interested in issues that people may have and making this as good as it can possibly be.

If you're submitting pull requests, make sure you run/update/add tests: npm test

npm install beforehand to get the project's development dependencies.