We can create customize default HTML select dropdown using CSS. We can either customize this using JS. Refer Create Custom Dropdown using jQuery article to create custom dropdown using JavaScript.

Use CSS below:

<style>
	
  select.custom-dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    /* border: 0 !important; */
    /* background-color: #0d98e8; */
    color: #333;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    font-size: 14px;
    padding: 10px;
    width: 245px;
    cursor: pointer;
    background: url(drop-down-arrow.png) no-repeat right center;
    background-size: 40px 37px;
    border: 1px solid #CCC;
    background-position: 206px 0;

 }
  select::-ms-expand {
    display: none;
 }
</style>

Use above CSS to customize select dropdown. This CSS is compatible with all browsers including IE 10+, FF, Chrome and MAC Safari.

Download Code

Demo: