horizontal align image to dropdown using css background

Question

I have a container that is a popup over a page and it has many controls one of them is a dropdown, now I would like to make this dropdown load dynamically, for which I need to add an icon next to the dropdown when it is loading.

How can i achieve the same using css specifically using the background property.. Is that the best solution?

Also I need my dropdown width to update once the dropdown content is loaded and the image disappears..

I am struggling to get the image on the page next to the dropdown..

here is a fiddle that I have created: http://jsfiddle.net/jxWCu/1

now I want to have the image horizontally aligned with the dropdown..

Answer 1

The select box and loading image need to be separate entities. Also, I do not suggest using a 320x320 gif. http://jsfiddle.net/jxWCu/11/

Answer 2

您可以将加载样式应用于容器div http://jsfiddle.net/jxWCu/7/

Answer 3

CSS pseudo-elements might make for a neat solution here too: [ http://jsfiddle.net/jxWCu/14/ ]

HTML:

<div class="loading">
    <select> 
        <option>Loading</option>
    </select>
</div>​

CSS:

.loading select { width: 260px; } /* Width of your dropdown */
.loading:after {
    content: url(http://ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif);
    vertical-align: middle;
}