select自定义

 

body{background: #222226;}
.select-hidden {display: none;visibility: hidden;padding-right: 10px;}
.select {cursor: pointer;display: inline-block;position: relative;font-size: 16px;color: #fff;width: 200px;height: 40px;font-weight: bold;}
.select-styled {position: absolute;top: 0;right: 0;bottom: 0;left: 0;background:#2F2F34;padding: 8px 15px;transition:all 0.2s ease-in;border: 1px solid #191919;}
.select-styled:after {content:"";width: 0;height: 0;border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 8px solid #FF5454;;position: absolute;top: 16px;right: 10px;}
.select-options {display: none;position: absolute;top: 100%;right: 0;left: 0;z-index: 999;margin: 0;padding: 0;list-style: none;background:#2F2F34; border: 1px solid #191919;border-top:none;max-height: 300px;overflow-y: auto;}
.select-options li {margin: 0;text-indent: 15px;transition:all 0.15s ease-in;height: 40px;line-height: 40px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-break: break-all;}
.select-options li:hover{background:#ff5454;color:#282828;}
.select-options[rel="hide"] {display: none;}

 

<select id="mounth">
  <option value="hide">-- Month --</option>
  <option value="january" rel="icon-temperature">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="year">
  <option value="hide">-- Year --</option>
  <option value="2010">2010</option>
  <option value="2011">2011</option>
  <option value="2012">2012</option>
  <option value="2013">2013</option>
  <option value="2014">2014</option>
  <option value="2015">2015</option>
</select>

 

 $('select').each(function () {
        var $this = $(this), numberOfOptions = $(this).children('option').length;
        $this.addClass('select-hidden');
        $this.wrap('<div class="select"></div>');
        $this.after('<div class="select-styled"></div>');
        var $styledSelect = $this.next('div.select-styled');
        $styledSelect.text($this.children('option').eq(0).text());
        var $list = $('<ul />', {'class': 'select-options'}).insertAfter($styledSelect);
        for (var i = 0; i < numberOfOptions; i++) {
          $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
          }).appendTo($list);
        }
        var $listItems = $list.children('li');
        $styledSelect.click(function (e) {
          e.stopPropagation();
          $('div.select-styled.active').not(this).each(function () {
            $(this).removeClass('active').next('ul.select-options').hide();
          });
          $(this).toggleClass('active').next('ul.select-options').toggle();
        });
        $listItems.click(function (e) {
          e.stopPropagation();
          $styledSelect.text($(this).text()).removeClass('active');
          $this.val($(this).attr('rel'));
          $list.hide();
          //console.log($this.val());
        });
        $(document).click(function () {
          $styledSelect.removeClass('active');
          $list.hide();
        });
      });