Bare-bones Select Dropdown Replacement - jQuery justselect

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.