HTML CSS 改变 SELECT 箭头的颜色

Question

我想要将SELECT箭头的颜色改成蓝色。

有简单方法可以做到吗？

- Derek

---

你能否发布负责显示此下拉菜单的CSS和HTML代码。 - AmanSinghal

选择 { 颜色：透明; -webkit-text-fill-color: 黑色; } - Andreas Zita

Answer 1

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

- Yasir Khan

---

我还建议在 select_box:after 中使用 pointer-events: none，否则当您正好点击箭头时，下拉菜单将不会打开。 :-) - Thomas Kekeisen

在这里解释所添加代码的核心功能是有帮助的。任何阅读此代码的人都必须深入查看，以提取实现所述目标所需的最低限度。 - Doggit

Answer 2

试试这段代码：

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

为"images/arrow.png"添加蓝色箭头图像。

- Kushan