Create Themeable Select Box In jQuery - stylish-select

Yet another select replacement plugin that progressively enhances the regular select boxes with your own CSS styles.

Currently comes with 4 themes: default, modern, Bootstrap 4 and Bootstrap 3. 

How to use it:

1. Make sure you reference stylish-select plugin's files in the document.

<link rel="stylesheet" href="/path/to/css/stylish-select.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/stylish-select.js"></script>

2. Just attach the function stylishSelect to the select element and done.

<select class="stylish-select">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
  <option value="8">Option 8</option>
  <option value="9">Option 9</option>
  <option value="10">Option 10</option>
</select>

$(function() {
  $('.stylish-select').stylishSelect();
});

3. Customize the placeholder in the data-select-placeholder attribute.

<select class="stylish-select" data-select-placeholder="Select Me!">
  OPTIONS HERE
</select>

4. Change the theme of the select box. All possible themes:

• empty: default theme
• modern
• bootstrap4
• bootstrap3

<select class="stylish-select" data-select-theme="modern">
  OPTIONS HERE
</select>

5. Auto adjust the size of the select box depending on the option length.

<select class="stylish-select" data-select-width="auto">
  OPTIONS HERE
</select>

6. Auto adjust the size of the suggestion list depending on the option length.

<select class="stylish-select" data-select-dropdown-width="auto">
  OPTIONS HERE
</select>

---

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