css - 如何在ie7中为选择/下拉菜单放置背景图像？

Question

似乎在ie7background-image中不起作用。<select>我想知道是否有人幸运地使用了 AlphaImageLoader 之类的任何过滤器或任何其他想法？

请在此处查看我的小提琴。

Answer 1

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

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

Answer 2

@Spudley 是正确的。

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

基本上，将其img放入 adiv并将其放置在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('http://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>