How to style a select
Styling a drop-down list is needed very often and it is not easy. Many websites therefore replace it with a JavaScript alternative. But the select element itself has several properties you can change, and they may be enough.
The look of drop-down lists still differs between browsers (as of September 2026), so test them in the browsers your visitors use. The select element itself can be styled well; the options in the open list much less – some browsers ignore padding or colors on option elements.
Padding, colors, border, size and font
<style>
.styled_select {
padding: 5px;
background: #000;
color: #fff;
border: 1px solid red;
border-radius: 4px;
width: 300px;
font: bold 16px Arial, sans-serif;
}
</style>
<select class="styled_select">
<option value="">--- choose ---</option>
<option style="background: #E44D27">first</option>
<option style="background: #0D6AB7">second</option>
<option style="background: #FEDA3F; color: #000">third</option>
</select>
You can color the list as a whole and also individual options. Options without their own color take the color of the select.
A custom arrow
The appearance property set to none turns off the default style of the form field, so the default arrow is not shown. Your own arrow can then be positioned absolutely where you want it. To keep the select clickable where the arrow is, add pointer-events: none to the arrow.
<style>
.select-cover {
width: 200px;
position: relative;
}
.select-cover select {
width: 200px;
appearance: none;
padding: 0 1.6em 0 .4em;
line-height: 1.5em;
font-size: 100%;
border: 1px solid #999;
}
.select-cover::before {
content: "";
pointer-events: none;
position: absolute;
top: 50%;
right: .5em;
margin-top: -4px;
border: 6px solid transparent;
border-top: 8px solid #da3f94;
}
</style>
<div class="select-cover">
<select>
<option value="">First</option>
<option value="">Second</option>
<option value="">Third</option>
</select>
</div>