jQuery Plugin That Replaces Select Elements with Customizable Dropdowns | Nice Select

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.


  • 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() {

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.

Related Posts


Responsive Multiple Selection Combo Box using Bootstrap 3 | MagicSuggest

MagicSuggest is an easy-to-use jQuery plugin for creating a combo menu that allows you to select multiple items from a dropdown list with typing and auto-complete support….


Material Design Inspired Tab UI In Vanilla JavaScript

Material Design tab vanilla JS implements a material design-inspired tab component with a click ripple effect and an active sliding menu cursor. Must Read: Responsive Accessible Tabs…


Simple Countdown Timer App In jQuery

The countdown is a front-end application that allows starting the countdown with two options: set a target date or write the number of countdown days. A countdown…


Add Animation to Your HTML5 Pages | animate.js

animate.js is a small JavaScript library that provides a convenient way to apply CSS animations powered by Animate.css to DOM elements without writing any CSS. Easily apply…


Responsive Hover Parallax Cards With Vuejs

Vue Responsive Parallax Cards Hover Create response cards with a scroll-triggered parallax effect in your Vue.js application. Must Read: jQuery Sliding Display Your Content Like a Deck…


Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices. Must Read: Create Dynamic Accordion Giving JSON Data Using…

Leave a Reply

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