How to put background image for select / dropdown menu in ie7?

Question

It background-imagedoes not seem to work on <select>in ie7. I am wondering if anyone will be able to use any filters like AlphaImageLoader or any other ideas?

See the fiddle here .

Answer 1

You cannot do it. In older versions of IE, select boxes have very limited styling options, and this certainly goes beyond their scope. I note that it works in IE8, which is a bit of a surprise, but I'm sure it will not be possible in IE7.

, , IE7, selectbox 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('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/

NB. top, IE7 .

Answer 3

Do it:

.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>

Run code