如何在ie7中放置用于选择/下拉列表的背景图像

Question

似乎background-image不适用于ie7中的<select>。我想知道是否有人幸运地使用任何过滤器，如 AlphaImageLoader 或任何其他想法？

请在这里看我的小提琴。

Answer 1

您将无法执行此操作。选择框在旧IE版本中的样式功能非常有限，这肯定超出了它们的能力。我注意到它确实可以在IE8中工作，这有点令人惊讶，但我很确定你会发现它在IE7中是不可能的。

鉴于此，在IE7中接近这一点的唯一方法是用Javascript编写自己的选择框替换小部件（或使用现有的第三方小部件）。坦率地说，对于如今使用率如此之低的浏览器来说，这似乎是矫枉过正。

Answer 2

@Spudley是正确的。

但是，您可以这样做...这是一个巨大的黑客。

基本上，将img放在div中，然后将其放在select盒上。 您还需要向option元素添加一些 

.HTML

<select class="example">
    <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dublin</option>
    <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wicklow</option>
    <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;kerry</option>
    <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;galway</option>
    <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tipperary</option>
    <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cork</option>
</select>
<div></div>

.CSS

div{
    background-image: url('https://i.stack.imgur.com/Kkwug.png'); 
    background-repeat:no-repeat;
    background-position:1% 45%; 
    height:50px;
    width:25px;
    position:relative;
    top:-35px;
    left:3px;
    z-index:2000;
}
.example{
    background:#F37D7D;
    position:relative;
    width:100px;
}

这是演示：http://fiddle.jshell.net/fQPR4/12/还是 http://fiddle.jshell.net/fQPR4/12/show/

注意：您需要破解top规则才能使其在IE7和现代浏览器中正常工作并看起来相同。

Answer 3

这样做：

.example {
  
     background: url(http://www.stackoverflow.com/favicon.ico) 96% / 25% no-repeat #fff;
  
}
select::-ms-expand {
    display: none;
}
select{
  
   border: 1px solid #ccc;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<select class="example">
		<option>dublin</option>
		<option>wicklow</option>
		<option>kerry</option>
		<option>galway</option>
		<option>tipperary</option>
		<option>cork</option>
	</select>
  
  <select class="example">
		<option>dublin</option>
		<option>wicklow</option>
		<option>kerry</option>
		<option>galway</option>
		<option>tipperary</option>
		<option>cork</option>
	</select>