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:
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:

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

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>
  </ul>
</div>

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="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/jquery.nice-select.js"></script>

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

$(document).ready(function() {
  $('select').niceSelect();      
});

3. Make the dropdown list full width.

<select class="wide">
  ...
</select>

4. Make the dropdown list right aligned.

<select class="right">
  ...
</select>

Change log:

2016-05-09

  • Add update and destroy methods

2016-02-16

  • Improve support for IE <= 10

2016-02-03

  • Tweak styles

2015-12-31

  • 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.