jQuery Plugin To Style Default Select Boxes - sea.select

sea.select is a minimal jQuery select replacement plugin that allows you to style the native select boxes in any way you prefer.

How to use it:

1. Load the sea.select.Default.css in the header that will provide the basic CSS styles for your select boxes.

<link rel="stylesheet" href="css/sea.select.Default.css">

2. Load jQuery JavaScript library and the sea-select.min.js script at the end of the html document.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/sea-select.min.js"></script>

3. Wrap your select box into a DIV element like this:

<div class="sea-select">
  <div class="sea-selected"></div>
  <ul class="sea-list"></ul>  
  <select>
    <option>Red Hat</option>
    <option>Ubuntu</option>
    <option>Debian</option>
    <option>OpenSuse</option>
    <option>Fedora</option>
  </select>
</div>

4. Style the select box whatever you like.

.sea-selected {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  background: #2C3E50;
  border: 1px solid #fff;
  border-radius: 3px;
  color: #fff;
}

.sea-selected.focus { border-radius: 3px 3px 0 0; }

.sea-list {
  background: #34495E;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: #fff;
  border-radius: 0 0 3px 3px;
  color: #fff;
}

.sea-list li { padding: 5px 10px; }

.sea-list li:hover { background: #1ABC9C; }

---

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