html - 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]--//-->

此外，您可以使用 Bootstrap 并自定义他们的选择框。