在IE9中选择框自定义

Question

我使用以下css属性自定义选择框箭头。它适用于IE9以外的其他浏览器。自定义后，IE9中可以找到两个重叠的箭头，它们是默认箭头和应用的自定义箭头。还有其他任何方式可以自定义选择所有浏览器的框？

select {
  appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('../img/icons/list-benifit-drop.png') no-repeat;
  background-position: 100%;
  text-indent: 0.01px;
  text-overflow: "";
  overflow: hidden;
  box-shadow: none;
}

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

干杯!!!

Answer 1

您应尝试为不同的浏览器使用不同的样式表文件，并覆盖选择框的样式。

<!--/!--[if lte IE 9]-->
    <link rel="stylesheet" href="css_for_IE9.css">
<!--[endif]--//-->

Aslo，您可以使用Bootstrap并自定义其选择框。