Bare-bones Select Dropdown Replacement - jQuery justselect
File Size: | 8.19 KB |
---|---|
Views Total: | 1895 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

An extremely simple jQuery select replacement plugin that converts the native select dropdown into an easy to style HTML list while preserving the native select methods.
How to use it:
1. Include the stylesheet justselect.min.css
in the head section that offers basic styles & animations for the custom select element.
<link href="css/justselect.css" rel="stylesheet" />
2. Include both jQuery JavaScript library and the JavaScript file justselect.min.js
at the bottom of the page.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/js/justselect.min.js"></script>
3. Just add the CSS class justselect
to your select box and the plugin will do the rest.
<select class="justselect"> <option selected="selected" value="jquery">JavaScript</option> <option value="css">CSS3</option> <option value="html">HTML5</option> </select>
4. The generated HTML list should be like these:
<div class="justselect-wrapper"> <select class="justselect"> <option selected="selected" value="jquery">JavaScript</option> <option value="css">CSS3</option> <option value="html">HTML5</option> </select> <div class="justselect-title">JavaScript</div> <ul class="justselect-list"> <li class="selected">JavaScript</li> <li>CSS3</li> <li>HTML5</li> </ul> </div>
5. Override the default CSS rules to create your own styles and animations.
.justselect-wrapper { /* your styles here */ } .justselect-title { /* your styles here */ } .justselect-list { /* your styles here */ } .justselect-list li { /* your styles here */ } .justselect-list li.selected { /* your styles here */ }
This awesome jQuery plugin is developed by lena-ts. For more Advanced Usages, please check the demo page or visit the official website.