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

Question

这里我要更改选择下拉框箭头部分的颜色。这应该也适用于IE9，Firefox和其他浏览器。现在我有一个像这样的下拉框

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

我认为可以通过浅灰色而不是深灰色来实现。我怎么能这样做？

或者通过使用所谓的hack在下拉列表上显示此图标？它适用于所有浏览器（IE9，Firefox等）吗？

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

Answer 1

你可以这样做：

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;
}

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

Answer 3

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

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>