CSS Custom Dropdown Select 适用于所有浏览器 IE7+ FF Webkit

Question

我想制作一个适用于所有浏览器的自定义下拉菜单。我在这里创建了一个，但箭头不可点击。如果我将它设置为选择的背景，那么 firefox 将覆盖它顶部的箭头。谁能告诉我获得适用于所有浏览器的自定义外观下拉菜单的最佳技术是什么，以及如何在没有 Javascript 的情况下使该旋钮可点击？

http://jsfiddle.net/DJDf8/1/

CSS:

#menulist {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 32px;
  border: 1px solid #000;
  width: 260px;
  text-indent: 8px;
}

.arrow {
  cursor: pointer;
  height: 32px;
  width: 24px;
  position: absolute;
  right: 0px;
  background-color: #c8c8c8;
  background: url('http://icons.aniboom.com/Energy/Resources/userControls/TimeFrameDropDownFilter/Dropdown_Arrow.png') 0;
}

<span style="position:relative;">
         <span class="arrow" ></span>
<select id="menulist">
         <option value="one">One</option>
         <option value="two">Two</option>
</select>
</span>

Answer 1

这很简单，你只需要给select元素添加一个背景图片，然后把它放在你需要的地方，但是不要忘记添加:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

根据 http://shouldiprefix.com/#appearance

出于互操作原因，Microsoft Edge 和 IE 移动版使用 -webkit- 前缀而不是 -ms- 支持此属性。

我刚做了这个 fiddle http://jsfiddle.net/drjorgepolanco/uxxvayqe/