CSS自定义下拉选项适用于所有浏览器IE7 + FF Webkit

Question

我想制作一个适用于所有浏览器的自定义下拉列表.我在这里创建了一个,但箭头不可点击.如果我将其设置为select的背景,则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 mobile使用-webkit-前缀而不是-ms-支持此属性.

我刚做了这个小提琴http://jsfiddle.net/drjorgepolanco/uxxvayqe/

Answer 2

根据链接:http://bavotasan.com/2011/style-select-box-using-only-css/需要做很多额外的返工(放置额外的div并将图像定位在那里.还有设计将断开,因为选项钻取将错误地与选择对齐.

这是一种简单易用的方法,允许您放置自己的下拉图像并删除浏览器默认下拉列表.(不使用任何额外的div).它的跨浏览器也是如此.

HTML

<select class="dropdown" name="drop-down">
  <option value="select-option">Please select...</option>
  <option value="Local-Community-Enquiry">Option 1</option>
  <option value="Bag-Packing-in-Store">Option 2</option>
</select>

CSS

select.dropdown {
  margin: 0px;
  margin-top: 12px;
  height: 48px;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  padding: 9px;
  font-family: tescoregular;
  font-size: 16px;
  color: #666666;
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  -moz-appearance: none;
  appearance: none;
  background: url('yoururl/dropdown.png') no-repeat 97% 50% #ffffff;
  background-size: 11px 7px;
}

Answer 3

你可能会检查Select2插件:

http://ivaynberg.github.io/select2/

Select2是基于jQuery的选择框的替代品.它支持搜索,远程数据集和无限滚动结果.

它非常受欢迎且非常易于维护.如果不是全部,它应该涵盖您的大部分需求.