JSFiddle - React, Tailwind, and code Playground

Better Select Elements with jQuery and CSS3 http://tutorialzine.com/2010/11/better-select-jquery-css3/

by Jennifer Perrin

HTML

<div id="page">
    <h1>Your Product</h1>

    <form method="post" action="">
    
        <!-- We are going to use jQuery to hide the select element and replace it -->
        
        <select name="fancySelect" class="makeMeFancy">
        
            <!-- Notice the HTML5 data attributes -->
        
            <option value="0" selected="selected" data-skip="1">Choose Your Product</option>
            <option value="1" data-icon="img/products/iphone.png" data-html-text="iPhone 4&lt;i&gt;in stock&lt;/i&gt;">iPhone 4</option>
            <option value="2" data-icon="img/products/ipod.png" data-html-text="iPod &lt;i&gt;in stock&lt;/i&gt;">iPod</option>
            <option value="3" data-icon="img/products/air.png" data-html-text="MacBook Air&lt;i&gt;out of stock&lt;/i&gt;">MacBook Air</option>
            <option value="4" data-icon="img/products/imac.png" data-html-text="iMac Station&lt;i&gt;in stock&lt;/i&gt;">iMac Station</option>
        </select>
    </form>
    
</div>

CSS

*{
    margin:0;
    padding:0;
}

body{
    color:#eee;
    background-color:#141414;
    font:15px Calibri,Arial,sans-serif;
}

#page{
    width:230px;
    margin:200px auto 150px;
}

#page h1{
    font-weight:normal;
    text-indent:-99999px;
    overflow:hidden;
    background:url('../img/your_product.png') no-repeat;
    width:230px;
    height:36px;
}

#page form{
    margin:20px auto;
    width:200px;
}

.tzSelect{
    
    /* This is the container of the new select element */
    
    height:34px;
    display:inline-block;
    min-width:200px;
    position:relative;
    
    /* Preloading the background image for the dropdown */
    background:url("../img/dropdown_slice.png") no-repeat -99999px;
}

.tzSelect .selectBox{
    position:absolute;
    
    height:100%;
    width:100%;
    
    /* Font settings */
    
    font:13px/34px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    text-align:center;
    text-shadow:1px 1px 0 #EEEEEE;
    color:#666666;

    /* Using CSS3 multiple backgrounds and a fallback */
    
    background:url('../img/select_slice.png') repeat-x #ddd;
    background-image:url('../img/select_slice.png'),url('../img/select_slice.png'),url('../img/select_slice.png'),url('../img/select_slice.png');
    background-position:0 -136px, right -204px, 50% -68px, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
    
    cursor:pointer;
    
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
}

.tzSelect .selectBox:hover,
.tzSelect .selectBox.expanded{
    background-position:0 -170px, right -238px, 50% -102px, 0 -34px;
    color:#2c5667;
    text-shadow:1px 1px 0 #9bc2d0;
}

.tzSelect .dropDown{
    position:absolute;
    top:40px;
    left:0;
    width:100%;
    border:1px solid #32333b;
    border-width:0 1px 1px;
    list-style:none;
    
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    
    -moz-box-shadow:0 0 4px #111;
   ...

JavaScript

$(document).ready(function(){
    
    // The select element to be replaced:
    var select = $('select.makeMeFancy');

    var selectBoxContainer = $('<div>',{
        width        : select.outerWidth(),
        className    : 'tzSelect',
        html        : '<div class="selectBox"></div>'
    });

    var dropDown = $('<ul>',{className:'dropDown'});
    var selectBox = selectBoxContainer.find('.selectBox');
    
    // Looping though the options of the original select element
    
    select.find('option').each(function(i){
        var option = $(this);
        
        if(i==select.attr('selectedIndex')){
            selectBox.html(option.text());
        }
        
        // As of jQuery 1.4.3 we can access HTML5 
        // data attributes with the data() method.
        
        if(option.data('skip')){
            return true;
        }
        
        // Creating a dropdown item according to the
        // data-icon and data-html-text HTML5 attributes:
        
        var li = $('<li>',{
            html:    '<img src="'+option.data('icon')+'" /><span>'+
                    option.data('html-text')+'</span>'
        });
                
        li.click(function(){
            
            selectBox.html(option.text());
            dropDown.trigger('hide');
            
            // When a click occurs, we are also reflecting
            // the change on the original select element:
            select.val(option.val());
            
            return false;
        });
        
        dropDown.append(li);
    });
    
    selectBoxContainer.append(dropDown.hide());
    select.hide().after(selectBoxContainer);
    
    // Binding custom show and hide events on the dropDown:
    
    dropDown.bind('show',function(){
        
        if(dropDown.is(':animated')){
            return false;
        }
        
        selectBox.addClass('expanded');
        dropDown.slideDown();
        
    }).bind('hide',function(){
        
       ...