CUSTOM DROPDOWN USING OVERFLOW

HTML

<div id = "mySelect" class = "styled">
   <select>
        <option>Apples</option>
        <option selected>Pineapples</option>
        <option>Chocklate</option>
        <option>Pancakes</option>
    </select>
</div>

CSS

#mySelect {
    position: relative;
    top: 5px;
    left: 5px;
}

.styled {
    width: 120px;
    height: 34px;
    overflow: hidden;
    border: 1px solid #999;
    background: url(http://www.stackoverflow.com/favicon.ico) no-repeat 96% #ddd;
} .styled:hover {
    border: 1px solid #DC3618;
}

.styled select {
    position: relative;
    background: transparent;
    top: -1px;
    left: -1px;
    width: 150px;
    height: 36px;    
    padding: 5px;
    font-size: 16px;
    -webkit-appearance: none;
}