Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Custom select dropdown using CSS

Posted in CSS

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: