styled select

only css styled dropdown select

by John Doe

HTML

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

CSS

select {
   border: 1px solid #515151;
   border-radius: 3px;
   background: transparent;
   width: 200px;
   height: 29px;
   padding: 3px 25px 5px 5px;
   font-size: 16px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-image: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-down-128.png);
   background-size: 12% auto; 
    background-repeat: no-repeat; 
    background-position: 98% 2px;
} 
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) { 
    select {
        background:none;
        padding: 5px;
    }
}