Custom Dropdown Select With Option Icons - customSelect

Custom Dropdown Select With Option Icons - customSelect

customSelect is a jQuery plugin which converts a hidden input into a dropdown select element with custom styles & templates.

The plugin dynamically renders options from JS objects and allows you to add custom icons to options via the template options.

Ideal for country, language, user selectors/pickers and more.

1. Load the stylesheet customSelect.jquery.css for the basic styling of the custom select.

<link rel="stylesheet" href="customSelect.jquery.css">

2. Create a hidden input field for the custom select.

<input type="hidden" id="countrySelecter" value="">

3. Load jQuery library and the jQuery customSelect plugin at the end of the HTML document.

<script src="" 
<script src="customSelect.jquery.min.js"></script>

4. Define your own data & template in the JavaScript.

var myOptions = [
    ['ct', 'ct.png', 'Catalonia'],
    ['es', 'es.png', 'Spain'],
    ['gb', 'gb.png', 'Great Britain'],
    ['de', 'de.png', 'Germany'],
    ['it', 'it.png', 'Italy'],
    ['fi', 'fi.png', 'Finland'],
    ['fr', 'fr.png', 'France']
var myTemplate = "<div class='jqcs_option' data-select-value='$0' style='background-image:url(example_icons/$1);'>$2</div>"

5. Initialize the plugin to activate the country selector.

  identifier: 'demo',
  selector: '#countrySelect',
  placeholder: 'Select your country',
  options: myOptions,
  template: myTemplate

6. Get the selected country stored in the hidden input.


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

  • Publication date: 24.08.2018
  • Source