HTML CSS Change Color of SELECT ARROW

Question

I'm looking to change the color of the SELECT arrow to blue.

Is there a simple way to do this?

Can you post the CSS and the HTML code which is responsible for this dropdown to appear. — AmanSinghal, Aug 10 '16 at 10:07
select { color: transparent; -webkit-text-fill-color: black; } — Andreas Zita, Feb 19 '20 at 22:28

Yasir Khan · Accepted Answer · 2016-08-10T10:22:28.717

19

.select_box{
  width: 200px;
  overflow: hidden;
  border: 1px solid #000;
  position: relative;
  padding: 10px 0;
}
.select_box:after{
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #f00;
  position: absolute;
  top: 40%;
  right: 5px;
  content: "";
  z-index: 98;
 }
.select_box select{
  width: 220px;
  border: 0;
  position: relative;
  z-index: 99;
  background: none;
}

<div class="select_box">
 <select>
   <option>Test This Select</option>
   <option>Test This Select</option>
 </select>
</div>

edited Aug 10 '16 at 10:22

answered Aug 10 '16 at 10:14

Yasir Khan

512
3
18

2

I would also recommend `pointer-events: none` for `select_box:after` since otherwise the dropdown will not open when you exactly click on the arrow. :-) – Thomas Kekeisen Nov 20 '20 at 08:00
1

It's helpful to explain the core function of the code you have added here. Anyone reading this has to look through in depth to extract the minimum necessary to achieve the stated objective. – Doggit Jul 24 '22 at 06:53

score 6 · Answer 2 · edited Jun 12 '22 at 12:56

try this code segment:

.customerStyle select {
  background: transparent;
  width: 170px;
  padding: 5px;
  border: 0;
  border-radius: 0;
  height: 35px;
}

.customerStyle {
   background: url("images/arrow.png") no-repeat right #ffffff;
   border: 1px solid #000;
   width: 150px;
   height: 35px;
   overflow: hidden;
 }

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

Add blue color arrow image for "images/arrow.png".

HTML CSS Change Color of SELECT ARROW

2 Answers2

Linked