-1

enter image description here

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

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

2 Answers2

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/

mxlse
  • 2,654
  • 17
  • 31
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>
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