Change the dropdown arrow design

Question

I wanted to change the dropdown arrow color and arrow model.

from other post1,post2 in stackoverflow i was able to change the arrow color , but not able to change the arrow design. How to get this?

My current dropdown

Required (blue arrow in different style)

Mycode

<div id="contentBottom">
    MyOptions: <select id="P1_LANGUAGE" class="selectlist" size="1" required="" name="p_t01"> </select> 
</div>

You have to use CSS property `appearance: none` to disable the native arrow, and then create your own over the select box. You have some examples here https://codepen.io/ericrasch/pen/zjDBx and many others all over the internet. — robinvrd, Jun 14 '19 at 07:36
@robinvrd ,thanks for providing the example. There I couldn't find the design related to my requirement. Is there any website i can refer? — Arun Palanisamy, Jun 14 '19 at 07:40
Most likely for the reason stated on the downvote button: "This question does not show any research effort; it is unclear or not useful". You might consider showing what you tried from those other posts and where you're getting stuck. See [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) — showdev, Jun 14 '19 at 08:00
@showdev , Do you also feel the same? I have researched so many question asked before here and even referenced those questions in my post. Also I have clearly provided screenshot of what is required and what is the current state along with my code :( But i dont know what more is expected . And this is not my first question in stackoverflow :) — Arun Palanisamy, Jun 14 '19 at 08:03
That's great! It would help to show what specifically you tried and how exactly it's not working. That makes the post more useful for future readers and might even benefit your own troubleshooting and learning processes. Since you asked why you might be getting downvotes, here's some good advice from SO: "Ask about specific problems with your existing implementation ... Make a good faith attempt to solve the problem yourself first ... Help others reproduce the problem". — showdev, Jun 14 '19 at 08:13
@showdev I understand that. But sometimes i don't know anything to try. I'm from DB side and I have very less idea about CSS. So i dont have much knowledge to try complex codes. So it is meaningless to try something i dont even know right? — Arun Palanisamy, Jun 14 '19 at 09:23
But you said you tried things from those other posts. Just show those things you tried and what specifically is going wrong. That makes it *easier* for people to help. The answers you're receiving here aren't much different from the answers in those other posts. Anyway, just a suggestion. — showdev, Jun 14 '19 at 20:21

robinvrd · Answer 1 · 2019-06-14T08:39:48.890

22

This is a really quick example that should you give ideas about how to do the trick.

select {
  padding: 10px;
  padding-right: 30px;

  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}

/* For IE (thanks to @SaiManoj) */
select::-ms-expand {
  display: none;
}

<select>
  <option>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
  <option>Option D</option>
</select>

edited Jun 14 '19 at 08:39

answered Jun 14 '19 at 07:45

robinvrd

1,760
12
28

This one is clean and better solution than mine. +1 – Sai Manoj Jun 14 '19 at 07:54
Thanks. I will check if it works. So for this i should upload the similar arrow into my application and point the URL in the background? – Arun Palanisamy Jun 14 '19 at 07:57
for IE you need to add the css which i have mentioned in my solution `select::-ms-expand { display: none; }` – Sai Manoj Jun 14 '19 at 08:01
@SaiManoj I am going to add this to the example, thanks mate. – robinvrd Jun 14 '19 at 08:38
No worries.You can add. Happy coding :) – Sai Manoj Jun 14 '19 at 08:49

Sai Manoj · Answer 2 · 2019-06-14T08:14:22.260

Hope this helps out

/* This is to remove the arrow of select element in IE */
select::-ms-expand {
  display: none;
}

select {
  -webkit-appearance: none;
  appearance: none;
}

.customerStyle select {
  background: transparent;
  width: 100px;
  padding: 5px;
  border: 0;
  border-radius: 0;
  height: 30px;
}
.customerStyle {
  background: url(https://s3.amazonaws.com/peoplepng/wp-content/uploads/2018/06/06124131/Down-Arrow-PNG-Image.png) no-repeat right #ffffff;
  border: 1px solid grey;
  border-radius: 5px;
  width: 100px;
  height: 30px;
  overflow: hidden;
  background-size: 18px 18px;

  }

<div class="customerStyle">
  <select class="selectCustomer">
    <option value="Jone">Jone</option>
    <option value="Tom">Tom</option>
  </select>
</div>

score 1 · Answer 3 · answered Dec 21 '21 at 22:21

This may help you:

.form-select{
    padding: .3125rem 3rem .3125rem 1rem;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right 1rem center;
    border-radius: .25rem;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #d8e2ef;
    color: #344040;
    background-size: 10px 12px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.075);
    outline:none;
}

<select class="form-select">
<option>Uno</option>
<option>Dos</option>
<option>Tres</option>
</select>

Change the dropdown arrow design

3 Answers3