Simple Custom Select Box

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <select>
        <option value="">SELECT</option>
        <option value="antelope">Antelope</option>
        <option value="dugong">Dugong</option>
        <option value="giraffe">Giraffe</option>
        <option value="koala">Koala</option>
        <option value="turkey">Turkey</option>
        <option value="wombat">Wombat</option>
    </select>

    <select>
        <option value="">Select an option&hellip;</option>
        <option value="aye">Aye</option>
        <option value="eh">Eh</option>
        <option value="ooh">Ooh</option>
        <option value="whoop">Whoop</option>
    </select>

CSS

body{
  margin: 50px;
}
.whs-select {
  width: 100%;
  height: 50px;
  background-color: #E6E8E6;
    cursor: pointer;
    display: inline-block;
    padding-right: 16px;
    position: relative;
    border-radius: 5px;
    -webkit-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
         -o-user-select:none;
            user-select:none;
            margin-top:20px;
}



.whs-select select{
  margin: 10px auto;
}
.whs-select-hldr{
    font-family: 'rajdhanimedium';
  font-size: 20px;
    background-color: #E6E8E6;
    /*background-image: url('http://cdn3.iconfinder.com/data/icons/fatcow/16x16_0140/bullet_arrow_down.png');*/
    background-position: 97% 60%;
    background-repeat: no-repeat;
    bottom: 0;
    color: #666666;
    font: bold 16px/37px sans-serif;
    left: 0;
    padding: 7px 10px;
    position: absolute;
    right: 0;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
    top: 0;
    border-radius: 5px;
}

.whs-select-hldr:hover {
  background-color: #E6E8E6 !important;
}

.whs-select-hldr:after{
  font-family: FontAwesome;
  color: #999999;
  content:"\f0d7";
  float:right;
  margin-top:0;
  margin-right:10px;
  border-radius: 5px !important;
  font-size: 20px !important;
}
.whs-select-hldr:hover {
    background-color: #fff;
}

.whs-options {
  width: 99.7%;
    background: #fff;
    color: #333;
    display: none;
    font: 16px/30px sans-serif;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 97%;
    z-index: 999;
    border: #BBBBBB solid 1px;
    border-radius: 5px;
    margin-top: 5px;
}
.active + .whs-options {
    z-index: 9999;
}
.whs-options li {
  height: 30px;
  font-weight: bold;
    padding: 8px 10px;
    
}
.whs-options li:last-child {
    
}
.whs-options li:hover {
    background: #0A4064;
    color: #fff;
}

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;
    
    // Wrap the select element in a div
    $this.wrap('<div class="whs-select" />');
    
    // Insert a styled div to sit over the top of the hidden select element
    $this.after('<div class="whs-select-hldr"></div>');
    
    // Cache the styled div
    var $whsSelectHldr = $this.next('div.whs-select-hldr');
    
    // Show the first select option in the styled div
    $whsSelectHldr.text($this.children('option').eq(0).text());
    
    // Insert an unordered list after the styled div and also cache the list
    var $list = $('<ul />', {
        'class' : 'whs-options'
    }).insertAfter($whsSelectHldr);
    
    // Insert a list item into the unordered list for each select option
    for(var i = 1; 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)
    $whsSelectHldr.click( function(e) {
        e.stopPropagation();
        $('div.whs-select-hldr.active').each( function() {
            $(this).removeClass('active')
                .next('ul.whs-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);
            }
        } */
        $(this).toggleClass('active')
           ...