Customizable & Animated Dropdown Plugin with jQuery and CSS3 - Nice Select

Customizable & Animated Dropdown Plugin with jQuery and CSS3 - Nice Select
File Size: 95 KB
Views Total: 5374
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Yet another jQuery select replacement plugin that turns your native html select boxes into customizable and CSS3 animated dropdown lists with one JS call.

The plugin will convert a standard select box:

  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>

Into an easy-to-style html list:

<div class="nice-select">
  <span class="current">Option 1</span>
  <ul class="list">
    <li class="option selected">Option 1</li>
    <li class="option">Option 2</li>
    <li class="option">Option 3</li>

How to use it:

1. Add references to jQuery library, nice-select.css and jquery.nice-select.js.

<link href="css/nice-select.css" rel="stylesheet">
<script src="//"></script>
<script src="js/jquery.nice-select.js"></script>

2. Call the function niceSelect() on the select element and done.

$(document).ready(function() {

3. Make the dropdown list full width.

<select class="wide">

4. Make the dropdown list right aligned.

<select class="right">

Change log:


  • Add update and destroy methods


  • Improve support for IE <= 10


  • Tweak styles


  • Add support for disabled options

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