Creating Custom Select Options With jQuery - custom-select

File Size: 11.1 KB
Views Total: 4301
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Creating Custom Select Options With jQuery - custom-select

custom-select is a jQuery plugin which converts the normal select element into an accordion-style dropdown list with custom markups for better styling & SEO.

How to use it:

1. Load the stylesheet custom-select.css in the document that provides the default styles for the dropdown list.

<link rel="stylesheet" href="custom-select.css">

2. Load the necessary jQuery library and custom-select plugin's script at the end of the document.

<!-- Necessary jQuery instance file -->
<script src="//"></script>

<!-- Custom select script file -->
<script src="custom-select.min.js"></script>

3. Just call the function on the existing select element and done.

<select class="demo">
  <option value="select1-value1">Select one - Value 1</option>
  <option value="select1-value2">Select one - Value 2</option>
  <option value="select1-value3">Select one - Value 3</option>

4. Set the element type to receive the default text (a, div, p, h).

  defaultElement: 'p'

5. Set the default text to display in the select element.

  defaultText: '-'

6. Decide whether to submit form when select option is selected.

  autoFormSubmit: false

7. Default CSS selectors.


  // Class to wrapper all the custom select elements.
  classContainer: '.custom-select-container',

  // Class to define current selected option text.
  classCurrent: '.custom-select-current',

  // Class to list of select options.
  classOptions: '.custom-select-options'


8. Specify the animation speed.

  animationSpeed: 100

Change log:


  • Custom select to selected items


  • Improve function finder


  • Improve function finder


  • Add animation time control feature

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