[monolithed]

Давно копал тему стилизации форм/селектов и пр., приходилось решать альтернативным путем. Могу предложить сделать на подобии такой реализации:

<style type="text/css">
#select {
    background: url('http://png-4.findicons.com/files/icons/2212/carpelinx/16/2downarrow.png') 100% 50% no-repeat;
    border: 1px solid #DDD;
    color: #747474;
    cursor: pointer;
    padding-left: 8px;
    user-select: none;
    -moz-user-select: none;
    -o-user-select:none;
    -khtml-user-select: none;
    width: 101px;
    height: 20px;
}

#colors {
    border: 1px solid #DDD;
    display: none;
    overflow: auto;
    width: 110px;
    max-height: 150px;
}

#colors div {
    width: 97px;
    height: 20px;
}
</style>

<script type="text/javascript">
window.onload = function(){
    var colors = document.getElementById('colors'), select = document.getElementById('select');
    
    for(var i=0; i<10; i++){
        var div = document.createElement('div');
        div.style.background = '#'+i+i+i+i+i+i;
        colors.appendChild(div);
    }
    
    select.onclick = function(){
        colors.style.display = colors.style.display == '' ? 'block' : '';
    };
};
</script>
<div id="select">--- select ---</div>
<div id="colors"></div>