JQuery Custom Select Box

by Ufuk Ozdemir

HTML

<select id="selectDay">
  <option value="01">01</option>
  <option value="02">02</option>
  <option value="03">03</option>
  <option value="04">04</option>
  <option value="05">05</option>
  <option value="06">06</option>
  <option value="07">07</option>
  <option value="08">08</option>
  <option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="29">29</option>
  <option value="30">30</option>
</select>
<select id="selectMonth">
  <option value="January">January</option>
  <option value="February">February</option>
  <option value="March">March</option>
  <option value="April">April</option>
  <option value="May">May</option>
  <option value="June">June</option>
  <option value="July">July</option>
  <option value="August">August</option>
  <option value="September">September</option>
  <option value="October">October</option>
  <option value="November">November</option>
  <option value="December">December</option>
</select>
<select id="selectYear">
  <option value="2000">2000</option>
  <option value="2001">2001</option>
  <option value="2002">2002</option>
  <option value="2003">2003</option>
  <option value="2004">2004</option>
  <option value="2005">2005</option>
  <option value="2006">2006</option>
  <option value="2007">2007</option>
  <option value="2008">2008</option>
  <option value="2009">2009</option>
  <option value="2010">2010</option>
</select>

CSS

body {
  padding: 20px;
}

select.hider {
  visibility: hidden;
  padding: 0 0 0 7px;
}

.select {
  display: inline-block;
  position: relative;
  float: left;
  margin-right: 8px;
  font: 12px/24px Arial, Sans-Serif;
  color: #333;
  border: 1px solid #ccc;
  cursor: pointer;
}

.select .inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  padding: 0 20px 0 7px;
  white-space: nowrap;
}

.select .inner:after {
  content: '';
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-color: #333 transparent transparent transparent;
  position: absolute;
  top: 9px;
  right: 6px;
}

.select .inner:active,
.select .inner.active {
  background-color: #eee;
}

.select .options {
  display: none;
  position: absolute;
  height: 240px;
  overflow: auto;
  top: 100%;
  right: -1px;
  left: -1px;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ccc;
  background-color: #fff;
}

.select .options li {
  margin: 0;
  padding: 0 6px;
}

.select .options li:hover {
  background-color: #f4c400;
  color: #333;
}

JavaScript

$(function() {
  $('select').each(function() {
    var thisSelect = $(this);
    var numberOfOptions = $(this).children('option').length;
    thisSelect.addClass('hider').wrap('<div class="select"></div>').after('<div class="inner"></div>');
    var customSelect = thisSelect.next('div.inner');
    customSelect.text(thisSelect.children('option').eq(0).text());
    var optionList = $('<ul />', {
      'class': 'options'
    }).insertAfter(customSelect);
    for (var i = 0; i < numberOfOptions; i++) {
      $('<li/>', {
        text: thisSelect.children('option').eq(i).text(),
        rel: thisSelect.children('option').eq(i).val()
      }).appendTo(optionList);
    }
    var optionListItem = optionList.children('li');
    customSelect.on('click', function(e) {
      e.stopPropagation();
      $(this).toggleClass('active').next('ul.options').toggle();
      $('div.inner.active').not(this).each(function() {
        $(this).removeClass('active').next('ul.options').hide();
      });
    });
    optionListItem.on('click', function(e) {
      e.stopPropagation();
      customSelect.text($(this).text()).removeClass('active');
      thisSelect.val($(this).attr('rel'));
      optionList.hide();
    });
    $(document).on('click', function() {
      customSelect.removeClass('active');
      optionList.hide();
    });
  });
});