Custom <select>s with CSS3

by danield770

HTML

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

CSS

/*.styled {
   width: 180px;
   height: 34px;
   overflow: hidden;
}*/


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

.custom-select select {
    display: inline-block;
    padding: 4px 3px 3px 5px;
    margin: 0;
    width: 150px;
    font: inherit;
    outline: none; /* remove focus ring from Webkit */
    line-height: 1.2;
    color: gray;
    border: 1px solid #ccc;
}

/* Select arrow styling */
.notIE .custom-select:after {
    content: '';
    width: 25px;
    height: 25px;
    position: absolute;
    display: inline-block;
    top: 4px;
    right: 4px;
    background: url(http://www.stackoverflow.com/favicon.ico) no-repeat right center white;
    color: gray;
    pointer-events: none;
}