Custom Select Box with jQuery and CSS – Pretty Dropdowns

The Pretty Dropdowns is a lightweight and responsive jQuery plugin to create custom select box. You just need to create a standard / regular select element, the plugin will replace it with custom ul and li based select box.

Generally, the select element can’t be stylized with CSS, the Pretty Dropdwons solves this issue. You can easily stylized select drop-down menus with this plugin.

Plugin Overview

Plugin: Pretty Dropdowns
Author: T. H. Doan
Licence: MIT Licence
Published: January 20, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 15.6 KB

Main Features

  • Can be fully customize select dropdowns with CSS.
  • Support for multiple-select lists (<select multiple>)
  • Full Keyboard navigation supported.
  • Support for options group (<optgroup>).
  • Auto-linked to <label for>
  • Fully responsive & keep the menu items within the viewport.
  • Easily add icons, thumbnails, and other custom HTML to the menu items

How to Use jQuery Custom Select Box

1. Load the jQuery and Pretty Dropdowns‘s CSS and JavaScript file into your HTML document.

<!-- jQuery -->
<script src=""></script>

<!-- Pretty Dropdowns CSS -->
<link rel="stylesheet" href="css/prettydropdowns.css">

<!-- Pretty Dropdowns Js -->
<script src="js/jquery.prettydropdowns.js"></script>

2. After that, create a standard select element with class name pretty and add your options in it.

    <select id="size" name="size" class="pretty">

3. Finally, initialize the plugin in jQuery document ready function to replace the standard select element to custom select box.

$(document).ready(function() {
      // Initiate Pretty Dropdowns

Advance Configuration Options for Custom Select Box

The following are some advance configuration options to create / customize “pretty dropdowns”.

Option Description, Default, Type

This option is useful to add custom class to style the select drop down menu. Default: “arrow”, Type: String.

   customClass: "class-name",

Define the width (in px or percentage) for select menu. Default: null, Type: Number/String.
Tip: Use number to set witdth in px & string for percentage.

   width: 200,

Define the height for select menu. Default: 50, Type: Number / String.

   height: 60

Delay in milliseconds before collapsing the drop-down menu after you hover off of it. Default: 200, Type: Number.

   height: 300,

Separator character to use for the list of selected items in a multi-select menu. Default: “;”, Type: String.

   multiDelimiter: ";",

Define the max number of selected items to display in a multi-select menu. Default: 99, Type: Number.

   multiVerbosity: 99,

Icon or symbol to mark that an item is selected. Default: “✓”, Type: String.
Tip: You can also use HTML in this string. e.g <i class=”fa fa-check”></i>

   selectedMarker: "✓",

Callback function to execute after loaded the select menu. Default: null, Type: Function.

   afterLoad: function(){
      // Code to execute

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link