How to change the select box arrow with css and html

Hi guys! In this tutorial I will explain to you how you can easily change the select box arrow with css and html. You can change the arrow without using javascript or jQuery. This tips works well in Firefox, Safari, Opera and Google Chrome.

To change the select arrow,  I will use this css code:

select{
-webkit-appearance:none;
text-indent:1px;
text-overflow: '';
width:200px;
background-image:url(view.png);
background-repeat: no-repeat;
background-position:right center;
}

And the html code:

<select>
<option>Option 1</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

You can see the results in the video bellow:









Leave a Comment