CUSTOM DROPDOWN USING OVERFLOW

by danield770

HTML

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

CSS

.styled select {
   background: transparent;
   width: 150px;
   font-size: 16px;
   border: 1px solid #ccc;
   height: 34px; 
} 

.styled{
   margin: 50px;
   width: 120px;
   height: 34px;
   border: 1px solid #111;
   border-radius: 3px;
   overflow: hidden;
   background: url(https://stackoverflow.com/favicon.ico) 96% / 20% no-repeat #ddd;
}