How To Style HTML Select Dropdown Using Only CSS

Styling an HTML select dropdown was always pretty frustrating because the annoying drop down arrow always stays the same. There isn’t too much stuff we can apply to it, just properties like color, background, font or border. As there is no direct way to do style it, it took me a while to figure out how easily we can style an HTML select dropdown using only CSS.

In this article, I'm going to show you a quick and easy way to style the select dropdown.

The HTML markup

To get started, we just need a default HTML drop-down markup.

<select class="select_box"> 
    <option value="1">This is option 1</option> 
    <option value="2">This is option 2</option> 
    <option value="3">This is option 3</option> 
    <option value="4">This is option 4</option> 
    <option value="5">This is option 5</option> 
</select>

The CSS

The default dropdown arrow and a border is all part of the default "appearance" of the form element.So, you just need to make sure appearance: none; is set in your styling css. Here background image holds the custom arrow.

/* body select.select_box */ 
body select { 
    display: block;
    padding: 10px 70px 10px 13px !important; 
    max-width: 100%; 
    height: auto !important; 
    border: 1px solid #e3e3e3; 
    border-radius: 3px; 
    background: url("https://i.ibb.co/b7xjLrB/selectbox-arrow.png") right center no-repeat; 
    background-color: #fff; 
    color: #444444; 
    font-size: 12px; 
    line-height: 16px !important; 
    appearance: none; 
    /* this is must */ -webkit-appearance: none; 
    -moz-appearance: none; 
} 
/* body select.select_box option */ 
body select option { 
    padding: 0 4px; 
} 
/* for IE and Edge */ 
select::-ms-expand { 
    display: none; 
} 
select:disabled::-ms-expand { 
    background: #f60; 
}

Knowing this little quick and easy workaround will make it a whole lot easier to style select dropdown. If you see any issues with CSS or not working as expected, Your site probably have some default styles that might conflict. In that scenario, you've to use the above CSS in a class.