Pseudo Select Element

HTML

<div style="select_wrap">
 <select id="test_select"><option value="1">List Item 1</option>
        <option value="1">List Item 2</option>
        <option value="2">List Item 3</option>
        <option value="3">List Item 4</option>
        <option value="4">List Item 5</option>
        <option value="5">List Item 6</option>
        <option value="6">List Item 7</option>
        <option value="7">List Item 8</option>
        <option value="8">List Item 9</option>
        <option value="9">List Item 10</option>
        <option value="10">List Item 11</option>
        <option value="11">List Item 12</option>
        </select>
   
</div>



<div class="custom-select">
    <span>Select Option</span>
    <ul>        
    </ul>
</div>

CSS

.custom-select {
    position: relative;
    display: inline-block;
    font-family: sans-serif;
    font-size: 93%;
    margin: 30px 50px;
}

.custom-select span {
    display: inline-block;
    min-width: 180px;
    color: #FFF;
    background-color: #333;
    padding: 5px;
    cursor: pointer;
}

.custom-select ul {
    position: absolute;
    display: none;
    border: 1px solid #333;
    width: 99%;
    max-height: 200px;
    overflow: auto;
    z-index: 10000;
}

.custom-select ul li {
    padding: 5px;
    border-bottom: 1px solid #333;
    cursor: pointer;
}

.custom-select ul li:hover {
    background-color: #666;
    color: #FFF;
}

.custom-select ul li:last-child {
    border-bottom: none;
}

JavaScript

var html=[];

$('#test_select option').each(function(i){
   html.push('<li rel="'+$(this).val() +'">'+$(this).text()+'</li>');
});

$('.custom-select ul').html(html.join(''))







/* cache main list elements so each doc click isn't a DOM search*/
var $lists = $('.custom-select');

$lists.live('click',function(e) {
    e.stopPropagation();
    $lists.not(this).find('ul:visible').hide()
    var $tgt = $(e.target);
    $(this).find('ul').slideToggle('fast');
    if ($tgt.is('li')) {
        $(this).find('span').html($tgt.html());
        var value=$tgt.attr('rel');
        $('#test_select').val( value);
    }
    
    
})

$(document).click(function(e) {
    $lists.find('ul:visible').hide();
});