How to change select dropdown arrow in CSS?

In this blog post, I will explain how to change the arrow in a select dropdown menu. This tutorial uses CSS and HTML.

CSS is a language that tells the browser how to display things. It can be used to change pretty much anything you want on your website, and one of those things might be the dropdown arrow in select input boxes. You can do this using CSS by changing its background color or image as well as other properties such as border-radius and box-shadow. Let’s go through some examples!

How to style CSS dropdown arrow?

Many websites, including the Mozilla Developer Network, look for a way to change the select dropdown arrow. Unfortunately, there is no direct CSS property to change the arrow in select tag.

But why not? In theory, it’s very simple: You have an <select> element with a dropdown list. If you want to change its appearance, all you need to do is configure it in CSS.

You can change the dropdown arrow with CSS. First, you need to get rid of the default behavior of the select tag by using the appearance:none property. You need to use vendor prefix CSS i.e.

• appearance:none;
• -webkit-appearance:none; /* safari and chrome */
• -moz-appearance:none; /* Mozilla */
• -ms-appearance:none; /* Ie */

If you use the above CSS, it will look something like this-

Here you can see that there is no dropdown icon present. Now we are going to style the dropdown arrow. You can use a .png image or SVG to create your select custom arrow.

HTML structure

<select class="select1">
    <option value="car">Car</option>
    <option value="bike">Bike</option>
    <option value="train">Train</option>
    <option value="aeroplane">Aeroplane</option>
</select>

CSS

.select1 {
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
    background-position: calc(100% - 12px) center !important;
    background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
    padding: 8px 32px 8px 16px;
}
/* To remove the arrow of select element in IE */
.select1::-ms-expand {
  display: none;
}

• In the above example, you can see I have removed the select box default styling using appearance:none;
• In background-position property, I have used a small calculation i.e. calc(100% - 12px) so that, it can align properly.
• In background property, I have set a svg icon as a dropdown.

In order to change CSS select arrow position, change the background-position value. For example, calc(100% - 12px). Increase or decrease the value as per your need.

How to use inline SVG content as a background image?

You can directly use a .svg file directly or if you don’t want to store your .svg file in your server, you can use its content directly.

To use SVG content as a background image, open the .svg file in any text editor. Copy anything from <svg> to </svg> for example-

<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>

Now in the background property inside the url() add data:image/svg+xml, first, then paste the <svg> content that you have copied.

That is what you need to take care of yourself, there is no # (hash) in the SVG content. If SVG contains hex color, just replace “#” with %23 i.e. #ffaabb would be %23ffaabb.