Custom Select Menu

Custom Select Menu

by Nirvanachain

HTML

<div class="input-wrapper">
    <div class="custom-select-container">
        <div id="custom" aria-hidden="true">1 Guest</div>
        <div class="custom-selector-image"></div>
        <select id="guests" class="search-option small" name="guests" onchange="numberOfGuests();">
            <option value="1">1 Guest</option>
            <option value="2">2 Guests</option>
            <option value="3">3 Guests</option>
        </select>
    </div>
</div>

CSS

.custom-select-container {
    position:relative;
}

#custom {
    width:120px;
    height:22px;
    padding-top:10px!important;
    padding-left:12px;
    padding-right:12px;
    padding-bottom:7px;
    background-image: url('http://i.imgur.com/kKiQxPG.jpg');
    background-position:0 bottom;
    background-repeat: repeat-x; 
}

.custom-selector-image {
    background-image: url('http://i.imgur.com/teLT9S1.png');
    background-position:1px -38px;
    cursor: pointer;
    display: block;
    height: 20px;
    margin-top: -10px;
    position: absolute;
    left: 100px;
    top: 45%;
    width: 24px;
}

.custom-select-container select {
    bottom: 0;
    height: 100%;
    left: 0;
    min-width: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

select {
    background-color:#FFFFFF;
    line-height:28px;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    color: #5A5A5A;
    display: inline-block;
    font-size: 13px;
    margin-bottom: 9px;
    padding: 4px;
    vertical-align:middle;
    font-size:13px;
    
    -ms-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 0 #000000;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 0 #000000;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 0 #000000;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 0 #000000;
    -ms-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; 
    -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; 
    -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; 
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;   
}

JavaScript

function numberOfGuests() {
    var customDiv = document.getElementById('custom');
    var guestNum = document.getElementById('guests').value;
    
    if (guestNum < 2) {
        customDiv.innerHTML = guestNum + ' Guest';
    }
    else {
        customDiv.innerHTML = guestNum + ' Guests';
    }
}