jQuery Nice Select is a lightweight jQuery plugin that replaces the original select elements with customizable dropdowns.

You can specify the alt text for each option, which will be displayed in the drop-down list when that option is selected.

Custom classes

Each class you assign to a selection element will be copied to the generated dropdown. In this way, you can customize different versions of it according to your needs just by adding new CSS.

Notes

• Autoprefixer is used to add vendor prefixes to CSS rules for older browser support. A nice-select-prefixed.scss file is also created if you want to include a SASS file in your project and you’re not using Autoprefixer.
• In some cases, there can be a short flash in which the original choices are displayed – between when the page loads and when the scripts run. This can be fixed by adding a CSS rule to hide it beforehand.

Must Read: A Prettier Way To Display Select Boxes | vue-dropdowns

How to make use of it:

1. Include jQuery and the plugin.

<script src="path/to/jquery.js"></script> 
<script src="path/to/jquery.nice-select.js"></script>

2. Include plugin styles, either compiled CSS.

<link rel="stylesheet" href="path/to/nice-select.css">

3. Import the SASS source (if you’re using SASS) into the master stylesheet for easier customization.

@import 'nice-select';

4. Finally, configure the plugin.

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

See Demo And Download

Official Website(hernansartorio): Click Here

This superior jQuery/javascript plugin is developed by hernansartorio. For extra Advanced Usage, please go to the official website.