Simple Custom Select Box

by zerrax

HTML

<div class="ui_search">
 <select name="genres">
    <option value="2019">2019</option>
    <option value="2018">2018</option>
    <option value="2017">2017</option>
    <option value="2016">2016</option>
    <option value="2015">2015</option>
    <option value="2014">2014</option>
    <option value="2013">2013</option>
    <option value="2012">2012</option>
    <option value="2011">2011</option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
    <option value="2007">2007</option>
    <option value="2006">2006</option>
    <option value="2005">2005</option>
    <option value="2004">2004</option>
    <option value="2003">2003</option>
    <option value="2002">2002</option>
    <option value="2001">2001</option>
    <option value="2000">2000</option>
    <option value="1999">1999</option>
    <option value="1998">1998</option>
    <option value="1997">1997</option>
    <option value="1996">1996</option>
    <option value="1995">1995</option>
    <option value="1994">1994</option>
    <option value="1993">1993</option>
    <option value="1992">1992</option>
    <option value="1991">1991</option>
    <option value="1990">1990</option> 
  </select>
  <select>
   <option value="1990">1990</option> 
    <option value="1991">1991</option>
    <option value="1992">1992</option>
    <option value="1993">1993</option>
    <option value="1994">1994</option>
    <option value="1995">1995</option>
    <option value="1996">1996</option>
    <option value="1997">1997</option>
    <option value="1998">1998</option>
    <option value="1999">1999</option>
    <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...

CSS

.ui_search {
    display: grid;
        grid-template-columns: auto auto auto auto auto auto;
      //   grid-gap:20px;
      width:100%;
}
.ui_search > .range-slider{

}
.ui_search > input{
  margin:20.5px;
  padding:10px;
  border:0;
  background-color: #444;
   border-radius: 3px;
    bottom: 0;
    box-shadow: 0 1px 4px hsla(0,0%,0%,.25),
                inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 0 0 2px hsla(0,0%,100%,.25);
                 color: #fff;
    left: 0;
    right: 0;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
    top: 0;
    background-color: #444;
}
.ui_search > button{
  margin:20.5px;
  padding:10px;
  border:0;
  background-color: #444;
   border-radius: 3px;
    bottom: 0;
    box-shadow: 0 1px 4px hsla(0,0%,0%,.25),
                inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 0 0 2px hsla(0,0%,100%,.25);
                 color: #fff;
    left: 0;
    right: 0;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
    top: 0;
    background-color: #444;
}
.ui_search > button:hover{
  background:#333;
  color:#fff;
  cursor:pointer;
}
label {
    color: #444;
    display: inline-block;
    font: bold 16px/1.5 sans-serif;
}
label:after {
    content: ':';
}
.hidden {
    visibility: hidden;
}
.select {
    cursor: pointer;
    display: inline-block;
    padding-right: 16px;
    position: relative;
    -webkit-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
         -o-user-select:none;
            user-select:none;
            margin: 20px 5px;
}
.styledSelect {
    background-color: #ddd;
    background-image: url('http://cdn3.iconfinder.com/data/icons/fatcow/16x16_0140/bullet_arrow_down.png'),
                      -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    background-image: url('http://cdn3.iconfinder.com/data/icons/fatcow/16x16_0140/bullet_arrow_down.png'),
                         -moz-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
   ...

JavaScript

var numberOfSelects = $('select').length;

// Iterate over each select element
$('select').each( function() {
    
    // Cache the number of options
    var $this = $(this),
        numberOfOptions = $(this).children('option').length;
    
    // Hides the select element
    $this.addClass('hidden');
    
    // Wrap the select element in a div
    $this.wrap('<div class="select" />');
    
    // Insert a styled div to sit over the top of the hidden select element
    $this.after('<div class="styledSelect"></div>');
    
    // Cache the styled div
    var $styledSelect = $this.next('div.styledSelect');
    
    // Show the first select option in the styled div
    $styledSelect.text($this.children('option').eq(0).text());
    
    // Insert an unordered list after the styled div and also cache the list
    var $list = $('<ul />', {
        'class' : 'options'
    }).insertAfter($styledSelect);
    
    // Insert a list item into the unordered list for each select option
    for(var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text()
        }).appendTo($list);
    }
    
    // Cache the list items
    var $listItems = $list.children('li');
    
    // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
    $styledSelect.click( function(e) {
        e.stopPropagation();
        $('div.styledSelect.active').each( function() {
            $(this).removeClass('active')
                .next('ul.options').filter(':not(:animated)').slideUp(250);   
        });
        /* Use this instead of the .each() method when dealing with a large number of elements:
        for(var i = 0; i < numberOfSelects; i++) {
            if($('div.styledSelect').eq(i).hasClass('active') === true) {
                $('div.styledSelect').eq(i).removeClass('active')
                    .next('ul.options').filter(':not(:animated)').slideUp(250);
            }
        } */
       ...