Simple jQuery Plugin For Styling Option Select Lists - Select 7

File Size: 12.2 KB
Views Total: 3488
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Plugin For Styling Option Select Lists - Select 7

Yet another jQuery based select replacement plugin for styling the native drop down option lists. The plugin is highly customizable via CSS so that you can simply add icons, placeholder, scrollbar, and position options to your existing option select list.

Basic usage:

1. Load the required jQuery Select 7 plugin's stylesheet in the header.

<link rel="stylesheet" href="jquery-select7.css">

2. Create a standard Html option list with data-icon attribute to add icons to your options.

<select class="select7">
<option data-icon="google.png">Google</option>
<option data-icon="facebook.png">Facebook</option>
...
</select>

3. Load the jQuery Select 7 plugin after jQuery javascript library at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery-select7.js"></script>

4. Enable the plugin by calling it on document ready.

<script>
$(".select7").select7()
</script>

Change log:

2014-07-17

  • templates support
  • support optgroup, collapse optgroups

2014-06-17

  • ios scroll fix

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