Changing HTML "select" tag's default arrow

Question

I am trying to change the HTML "select" tag's default arrow to the one similar in the photo attached. Any ideas please?

There are a few working solutions here, [select arrow style change](http://stackoverflow.com/q/14218307/6395782) — DannyBoi, Aug 21 '16 at 16:00

score 1 · Accepted Answer · answered Aug 21 '16 at 15:53

1

Here's a pure CSS solution: You could hide the default arrow and display another one using a background image. This is an example which you can customize based on your needs.

select {
  width: 100px;
  padding-left: 5px;
  border: 1px solid #ccc;
  height: 25px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(http://www.stackoverflow.com/favicon.ico) 95% / 20% no-repeat #fff;
}

https://jsfiddle.net/yorknche/

answered Aug 21 '16 at 15:53

mxlse

2,654
17
31

Thanks mxlse!!!! that solved my issue!!! – alimarwan Aug 22 '16 at 08:50
i've been looking for a short answer like this since long time! – alimarwan Aug 22 '16 at 08:57

caldera.sac · Answer 2 · 2016-08-22T09:38:54.833

0

is this what you want, but you have to change the size values according to you need.

<html>
<head></head>
<title></title>


<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<style>
.container{
  position: absolute;
  width: 150px;
}


select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    width: 100%;
    height: 20px;
    font-size: 15px;
    position: absolute;
    opacity: 0.5;

}

.set{
  position: absolute;
  left: 85%;
  
}
</style>

<body>



<div class="container">
<i class="fa fa-angle-down set"></i>
<select class="myselect">
 <option>All &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
 <option>First Option</option>
 <option>Second Option</option>
</select>

</div>

</body>


</html>

edited Aug 22 '16 at 09:38

answered Aug 21 '16 at 16:13

caldera.sac

4,918
7
37
69

Thanks Anuradh! I have a question why r we adding jquery – alimarwan Aug 22 '16 at 08:52
uh, don't bother about that, this is the html file I use to answer for the question. so I used this to answer for the `jquery` also. I forgot to remove it. very very sorry about that. It does't affect to the answer.sorry if you get any misunderstand about the code. – caldera.sac Aug 22 '16 at 09:40
No issue bro, and thanks for your support really! – alimarwan Aug 23 '16 at 11:47

Changing HTML "select" tag's default arrow

2 Answers2