如何在选择框下拉菜单中更改蓝色突出显示的颜色

Question

如何更改此下拉菜单中的蓝色突出显示？

链接到选择框演示

如果可能的话，我想将突出显示颜色更改为灰色。

select {

  border: 0;

  color: #EEE;

  background: transparent;

  font-size: 20px;

  font-weight: bold;

  padding: 2px 10px;

  width: 378px;

  *width: 350px;

  *background: #58B14C;

  -webkit-appearance: none;

}

#mainselection {

  overflow: hidden;

  width: 350px;

  -moz-border-radius: 9px 9px 9px 9px;

  -webkit-border-radius: 9px 9px 9px 9px;

  border-radius: 9px 9px 9px 9px;

  box-shadow: 1px 1px 11px #330033;

  background: url("http://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C;

}

<div id="mainselection">

  <select>

    <option>Select an Option</option>

    <option>Option 1</option>

    <option>Option 2</option>

  </select>

</div>

Answer 1

试试这个..我知道这是一个老帖子，但它可能对某人有帮助select option:hover,&nbsp; &nbsp; select option:focus,&nbsp; &nbsp; select option:active {&nbsp; &nbsp; &nbsp; &nbsp; background: linear-gradient(#000000, #000000);&nbsp; &nbsp; &nbsp; &nbsp; background-color: #000000 !important; /* for IE */&nbsp; &nbsp; &nbsp; &nbsp; color: #ffed00 !important;&nbsp; &nbsp; }&nbsp; &nbsp; select option:checked {&nbsp; &nbsp; &nbsp; &nbsp; background: linear-gradient(#d6d6d6, #d6d6d6);&nbsp; &nbsp; &nbsp; &nbsp; background-color: #d6d6d6 !important; /* for IE */&nbsp; &nbsp; &nbsp; &nbsp; color: #000000 !important;&nbsp; &nbsp; }