This is a plugin to replace the HTML <select> element for styling purposes.
- Multiple sizes: small (same size as normal HTML
<select>), medium and large - Stylable: Each
<select>is now customisable!
<optgroup>support- Multiple select option
Surround your <select> with a div:
<div class="AnyClassWillDo">
<select>
<option>Option 1 - Meat</option>
<option>Option 2 - Fruit</option>
<option>Option 3 - Vegetables</option>
<option>Option 4 - Dairy Products</option>
<option>Option 5 - Eggs + Fish</option>
<option>Option 6 - Other</option>
</select>
</div>
Include JQuery and this plugin in the <head> tag:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/path-to-plugin/jquery-ul-select.js"></script>
</head>
And call the function for the desired <div>:
$('.AnyClassWillDo').ulSelect('small');
This is the result:
Alternatively, you can use this:
$('.AnyClassWillDo').ulSelect('medium');
Or this
$('.AnyClassWillDo').ulSelect('large');
To produce this:
Or this:
Depending on the size required.
Warning! Avoid calling the .ulSelect() function more than once on the same element.