Pretty jQuery Custom Select Box Plugin -

File Size: 34.3 KB
Views Total: 6025
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Pretty jQuery Custom Select Box Plugin - is a robust jQuery plugin that helps you style/customize the default single- or multi- select boxes and allows custom check icons for each status of (un)selected options.

Important NOTE:

The library now works as a vanilla JavaScript plugin. The latest demo, documentaition are now available on Powerful Single & Multiple Select Library –

Basic Usage:

1. load the required tail-select.css in your document's head section.

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

2. Load the necessary jQuery library together with jQuery and jQuery mousewheel plugin at the end of your document.

<script src="//"></script>
<script src="path/to/jquery.mousewheel.min.js"></script>
<script src="path/to/jquery.tail-select.min.js"></script>

3. Call the plugin with default settings on your existing select element and done.


4. Full options. Override the following JS options during initialization to customize your select boxes.

// allows to remove a selected option on a single select field.

// limits the number of selectable options.
"multi_limit":  0,

// text to be displayed if the user reached the "multi_limit".
"multi_limit_text":"You can't add more options",

// displays the number of selected options as well as the "multi_limit".

// moves each selected option to the top of the options-list or to an own container.
"multi_moveto":  false,


// enables the option-description feature
"description":  false,

// hides each disabled option in the options-list

// placeholder
"placeholder":   "Select an Option...",

// text to be displayed if all options are selected or if the select field has no option.
"text_empty":   "No Options available",

// custom icons.
"icons":  {
  "show":  true,
  "class":  "tailMS-icon",

5. Available events.

// triggered after the Tail.Select field is fully initialized.
$("select").on("tailSelect:ready", function(event, id, selector, element){
  // do something

// triggered on each Select and De-Select action.
$("select").on("tailSelect:change", function(event, option, selected){
  // do something

// triggered if the user reached the limit of an option field.
$("select").on("tailSelect:limit", function(event, number, limit){
  // do something

// triggerd by the user or also by the initialization.
$("select").on("tailSelect:empty", function(event, complete, group){
  if(complete === true){
  } else {
    makeIt_awesome(this, group);


v0.4.2 (2018-10-17)

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