18

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

Is there a simple way to do this?

SELECT BOX

2
  • 1
    Can you post the CSS and the HTML code which is responsible for this dropdown to appear. Aug 10, 2016 at 10:07
  • select { color: transparent; -webkit-text-fill-color: black; } Feb 19, 2020 at 22:28

2 Answers 2

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>

2
  • 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. :-) Nov 20, 2020 at 8: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, 2022 at 6:53
6

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".

Not the answer you're looking for? Browse other questions tagged or ask your own question.