This is particularly useful in mobile development where it is more user friendly to use the default select options menu than a customised JavaScript dropdown, which are often hard to select from on a handset. 

 

select

{

       background: url(../images/icon-dropdown.gif) no-repeat right 0;

       border: 2px solid #0E5FE8;

       -webkit-appearance: none;

       -webkit-border-radius: 0;

       appearance: none;

       border-radius: 0;

       padding: 2px 5px 2px 2px;

       width: 150px;

}

 

 

What does each part do?

-webkit-appearance: none removes the default select look and feel

background adds the new icon for the drop down

adding padding to make the clickable area larger, which is helpful on mobile