HTML选择箭头的CSS更改颜色 [英] HTML CSS Change Color of SELECT ARROW

问题描述

有没有一种简单的方法可以做到这一点？

解决方案

  .select_box {width：200px;溢出：隐藏; border：1px solid＃000;位置：相对; padding：10px 0;}。select_box：after {width：0;身高：0; border-left：6px solid transparent; border-right：6px solid transparent; border-top：6px solid＃f00;位置：绝对;顶部：40％;右：5px;内容：; z-index：98; } .select_box select {width：220px; border：0;位置：相对; z-index：99;背景：无;}  

 < div class =select_box > <选择> < option>测试此选择< / option> < option>测试此选择< / option> < / select>< / div>  

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

Is there a simple way to do this?

解决方案

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

这篇关于HTML选择箭头的CSS更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！