如何更改选择下拉箭头部分的颜色？答案

【问题标题】：How to change the color of the select drop down arrow part?如何更改选择下拉箭头部分的颜色？
【发布时间】：2015-02-10 05:43:29
【问题描述】：

这里我想改变选择下拉框箭头部分的颜色。这在 IE9、Firefox 和其他浏览器中也应该可以工作。现在我有一个这样的下拉框

我希望箭头部分看起来像这样

我认为它可以通过使用浅灰色而不是深灰色来实现。我该怎么做？

或者通过使用所谓的 hack 将这个图标放在下拉菜单上？它是否适用于所有浏览器（IE9、Firefox 等）？

我尝试浏览网上的所有解决方案，但无法在 IE9 上运行。那么有人可以帮帮我吗？

【问题讨论】：

标签： html css select drop-down-menu background-color

【解决方案1】：

它并不迷人，但你可以相对容易地伪造它：

span {
  position: relative;
}
span:after {
  height: 100%;
  content: '\25BE';
  text-align: center;
  position: absolute;
  top: 1px;
  width: 15px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0F0F0), color-stop(1, #828282));
  background-image: -o-linear-gradient(bottom, #F0F0F0 0%, #828282 100%);
  background-image: -moz-linear-gradient(bottom, #F0F0F0 0%, #828282 100%);
  background-image: -webkit-linear-gradient(bottom, #F0F0F0 0%, #828282 100%);
  background-image: -ms-linear-gradient(bottom, #F0F0F0 0%, #828282 100%);
  background-image: linear-gradient(to bottom, #F0F0F0 0%, #828282 100%);
  display: inline-block;
  right: 1px;
  line-height: 20px;
  pointer-events: none;
}

<span><select>
    <option>option</option>
</select></span>

【讨论】：

【解决方案2】：

选择框在浏览器之间非常不一致并且难以设置样式。考虑切换到替换选择框like this 的东西。它通过使用 jQuery 并隐藏实际的选择项来工作。只需一行代码即可轻松开启：

$("select").selecter();

输出看起来像这样：

<div tabindex="0" class="selecter  closed">
    <select class="selecter_basic selecter-element" id="selecter_basic" name="selecter_basic" tabindex="-1">
        <option value="One">One</option>
        <option value="Two">Two</option>
    </select><span class="selecter-selected">One</span>
    <div class="selecter-options scroller">
        <div class="scroller-bar" style="height: 100px;">
            <div class="scroller-track" style="height: 100px; margin-bottom: 0px; margin-top: 0px;">
                <div class="scroller-handle" style=""></div>
            </div>
        </div>
        <div class="scroller-content"><span data-value="One" class="selecter-item selected">One</span><span data-value="Two" class="selecter-item">Two</span>
        </div>
    </div>
</div>

【讨论】：

【解决方案3】：

你可以这样做：

http://bavotasan.com/2011/style-select-box-using-only-css/

.styled-select select {
 background: transparent;
 width: 268px;
 padding: 5px;
 font-size: 16px;
 line-height: 1;
 border: 0;
 border-radius: 0;
 height: 34px;
 -webkit-appearance: none;
}
.styled-select {
 width: 240px;
 height: 34px;
 overflow: hidden;
 background: url(new_arrow.png) no-repeat right #ddd;
 border: 1px solid #ccc;
}

【讨论】：