HTML Select styling

styled_select.css

.select-bg {
    position: relative;
    display: inline-block;
}

select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: #74646e;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: #fff;        
}

/* Select arrow styling */
.notIE .select-bg:after {
    content: '';
    width: 23px;
    height: 23px;
    position: absolute;
    display: inline-block;
    top: 4px;
    right: 4px;
    background: url(http://www.stackoverflow.com/favicon.ico) no-repeat right center white;
    pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) { 
    .notIE .select-bg:after
    {
        display:none;
    }
}

styled_select.html

<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
<label>test</label>
<div class="select-bg" />
<select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
</select>
<!--[if !IE]> --></div> <!-- <![endif]-->