Nice, compact, mobile-friendly select styling.

select-styling-markup.html

<div class="select">
    <select name="">
        <option value="">&nbsp;</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</div>

<script>
    // select element styling
    jQuery(document).ready(function($) {
        jQuery("select").each(function(){
            var title;
            if( jQuery("option:selected", this).val() != "") {
                title = jQuery("option:selected", this).text();
            } else {
                title = "&nbsp;";
            }
            jQuery(this).after('<span>' + title + '</span>').change(function() {
                var val = jQuery("option:selected", this).text();
                jQuery(this).next().text(val);
            });
        });
    });
</script>

select-styling-style.css

.select > select {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
}

.select > span {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    padding: 4px 0;
    display: block;
    color: #555;
    border: #ccc solid 1px;
    background-color: #bde1ec;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}