Style Dropdown Menu with CSS and Javascript

Dropdown selects in HTML are some of the most natively un-user-friendly items. Styling them is a pain and at their base functionality they are not very useful unless you have a limited amount of items with a limited amount of needs.

That’s where Chosen comes in. It is a javascript library that makes the dropdown experience much nicer looking, as well as much nicer from a functionality perspective as well.

Above you can see the default Chosen functionality. It looks great, and by default has a simple search mechanism to filter through results in case you have a large amount of items in your dropdown. First, include the javascript and css files. Then, initialize them with the code below.


It’s as easy as that. Now let’s take it to the next level, what if you wanted to be able to change the functionality of the dropdown to allow for multiple selections? Search for “Red” below, then hit enter, search for “Blue”, then hit enter. Now you can remove them just as easily from your selection by just hitting the X or backspace twice.

All you have to do is pass the option multiple in the call of the select as below. There is no change to the javascript, it gets initialized the exact same way.

<select class="chosen" multiple style="width: 250px;">

Check out the demo below or you can download the examples in a zip.

Posted by Will on June 4, 2012

Leave a Reply

Your email address will not be published. Required fields are marked *

TechJunkie Also Recommends