How to change select dropdown arrow in CSS

Almost all the HTML elements could be styled by using the CSS language but there are some elements which cannot be fully styled using CSS language.

HTML dropdown element is one of them which cannot be fully styled using CSS language. But some changes we can do like changing the select dropdown arrow in CSS.

So today I shall teach you How to change select dropdown arrow in CSS.

So without wasting your time let’s start.

Step 1 – Create new html document code

In the above screenshot you can see that I have created a basic html document. That contains the root “html” tag and the “head” and “body” tag.

Step 2 – Create a basic select dropdown with a few options

In the above screenshot you can see that we have created a select element using select tag with 3 basic options.

Now render this html code in our web browser to see how our dropdown is looking.

Step 3 – Render the page in web browser

In the above screenshot you will see the expended select dropdown element. Which has 3 basic select options.

Now let’s manipulate the dropdown arrow of the select option using CSS.

Step 3 – Add necessary CSS style to hide default select dropdown arrow

In the above highlighted section of the screen shot, you will see that I have added 3 CSS properties in the select tag body.

The first one is the general property which hides the dropdown arrow. And the second property is “-moz-appearance” to hide the select arrow on Firefox web browser. 

And the third one is “-webkit-appearance” to hide the select dropdown arrow on Safari and Chrome web browsers.

Now let’s render this code in our web browser to see the effect of the css style.

In the above screenshot you will see that we have successfully hidden the default dropdown arrow of the select dropdown element.

Now let’s start adding a custom arrow to our select dropdown element.

Step 4 – Add some padding to right side of select element

In the above screenshot you will see I have added a 15 pixels padding to the right of the dropdown element.

Now let’s render it to the web browser to see our changes in the web browser.

In the above screenshot you will see a 15 pixel padding has been added to the right side of the dropdown element.

Now we are ready to add a custom arrow image to our select element.

Step 5 – Add background arrow image using CSS

In the above screenshot you will see I have added 4 properties.

• First property sets the background image via the url of the image.
• Then the second property is to control the repeat of the background image. With this property our image will not be repeated to the x and y axis to the element.
• In third position I have added a background position property that controls the position of our dropdown arrow image. The first value is a calc function that controls the x axis position of the image and the second property is the center that controls the y axis position of the image.
• The Fourth property is the image size. I have adjusted the background image size according to the need.

Now let’s render it in the web browser and see our final results.

Congratulations you have successfully changed the dropdown arrow of the select element using pure CSS.

Summary

In this tutorial we have learned the simple way to change the dropdown arrow of an HTML select element in the following steps.

1. First we have created the simple document.
2. We added basic html code of select element with some basic options.
3. Then we have hidden the default dropdown arrow of the select element.
4. In our fourth step we have added a new dropdown arrow image as background using CSS.
5. And that’s all.

You may also like:

• How to Create a Website Using HTML on Notepad
• How to Horizontally Center a Button in CSS – Top 3 Best Ways