jQuery.simpleselect demo

More information, documentation and download on the project's page : http://pioul.fr/jquery-simpleselect

HTML

<script src="http://pioul.fr/ext/jquery-simpleselect/jquery.simpleselect.min.js"></script>
<div class="select-container" style="left: 100px;">
  <p>Regular select</p>
  <select id="the_select" name="the_select">
        <option>Option 1</option>
        <option selected="selected">Option 2 (pre-selected)</option>
        <option>Option 3</option>
        <option>Option 4</option>
    </select>
</div>

<div class="select-container" style="left: 400px;">
  <p>Disabled regular select (<a href="#" id="toggle-disabled" class="test">Toggle State</a>)</p>
  <select disabled="disabled">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
    </select>
</div>

<div class="select-container" style="left: 700px;">
  <p>Select with optgroups</p>
  <select>
        <optgroup>
            <option>Option 1.1</option>
        </optgroup> 
        <optgroup>
            <option>Option 2.1</option>
            <option>Option 2.2</option>
        </optgroup>
        <optgroup>
            <option>Option 3.1</option>
            <option>Option 3.2</option>
            <option>Option 3.3</option>
        </optgroup>
    </select>
</div>

<div class="select-container" style="left: 1000px;">
  <p>Select with optgroups and optgroup labels</p>
  <select>
        <optgroup label="Group 1">
            <option>Option 1.1</option>
        </optgroup> 
        <optgroup label="Group 2">
            <option>Option 2.1</option>
            <option>Option 2.2</option>
        </optgroup>
        <optgroup label="Group 3">
            <option>Option 3.1</option>
            <option>Option 3.2</option>
            <option>Option 3.3</option>
        </optgroup>
    </select>
</div>

CSS

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #333;
  background-color: #fff;
}

.select-container {
  position: absolute;
  top: 200px;
}

.hidden_select_container {
  width: 0;
  height: 0;
  overflow: hidden;
}

.simpleselect {
  position: relative;
  color: #333;
}

.simpleselect,
.simpleselect .options {
  width: 200px;
}

/* compensation for the border */

.simpleselect .options {
  width: 198px;
}

.simpleselect,
.simpleselect .placeholder,
.simpleselect .options .option {
  height: 40px;
  line-height: 40px;
}

.simpleselect .placeholder,
.simpleselect .options .option,
.simpleselect .options .optgroup .optgroup-label {
  padding: 0 10px;
  cursor: pointer;
}

.simpleselect .options .optgroup .optgroup-label {
  cursor: default;
  font-weight: bold;
}

.simpleselect .options .optgroup .option,
.simpleselect.has-optgroup .placeholder {
  padding: 0 20px;
}

.simpleselect .placeholder,
.simpleselect .options {
  background: #e3e3e3;
  border: 1px solid #bbb;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
  -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
  box-shadow: inset 0 0 1px 1px #f6f6f6;
}

.simpleselect .options {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.simpleselect .options .option,
.simpleselect .options .optgroup,
.simpleselect .options .optgroup .optgroup-label {
  border-bottom: 1px solid #bbb;
}

.simpleselect .options .option {
  -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
  -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
  box-shadow: inset 0 0 1px 1px #f6f6f6;
}

.simpleselect .placeholder:hover,
.simpleselect.active .placeholder,
.simpleselect .options .option.active {
  background: #d9d9d9;
}

.simpleselect.disabled .placeholder,
.simpleselect.disabled .placeholder:hover {
  background: #f3f3f3;
  color:...

JavaScript

$("select")
  .simpleselect()
  .bind("change.simpleselect", function() {
    console.log('change; new value=' + $(this).val());
  });

$("#toggle-disabled").bind("click", function(e) {
  e.preventDefault();
  var select = $(this).closest(".select-container").find("select");
  if (select.prop("disabled")) select.simpleselect("enable");
  else select.simpleselect("disable");
});