title: Image in SELECT element
body: <p>I know how to have pictures show up next to the options in a HTML dropdown form element using the CSS background-image property.</p>
  
  <p>However, the images do not show up on the selected element. Is there any way to do this (preferably using only CSS)?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Here is an example of the working code for the list elements. However, when the drop-down is closed, you only see the text of the selected element, without the image:</p>
  
  <pre><code>&lt;select name="form[location]"&gt;
      &lt;option value="ad" style="background: url(img/flags/ad.gif) no-repeat; padding-left: 20px;"&gt;Andorra&lt;/option&gt;
      &lt;option value="ae" style="background: url(img/flags/ae.gif) no-repeat; padding-left: 20px;"&gt;United Arab Emirates&lt;/option&gt;
      &lt;option value="af" style="background: url(img/flags/af.gif) no-repeat; padding-left: 20px;"&gt;Afghanistan&lt;/option&gt;
      &lt;option value="ag" style="background: url(img/flags/ag.gif) no-repeat; padding-left: 20px;"&gt;Antigua and Barbuda&lt;/option&gt;
      &lt;option value="ai" style="background: url(img/flags/ai.gif) no-repeat; padding-left: 20px;"&gt;Anguilla&lt;/option&gt;
      &lt;option value="al" style="background: url(img/flags/al.gif) no-repeat; padding-left: 20px;"&gt;Albania&lt;/option&gt;
      &lt;option value="am" style="background: url(img/flags/am.gif) no-repeat; padding-left: 20px;"&gt;Armenia&lt;/option&gt;
      &lt;option value="an" style="background: url(img/flags/an.gif) no-repeat; padding-left: 20px;"&gt;Netherlands Antilles&lt;/option&gt;
      &lt;option value="ao" style="background: url(img/flags/ao.gif) no-repeat; padding-left: 20px;"&gt;Angola&lt;/option&gt;
      &lt;option value="ar" style="background: url(img/flags/ar.gif) no-repeat; padding-left: 20px;" selected="selected"&gt;Argentina&lt;/option&gt;
  
      [...] - I think you get the idea.
  
  &lt;/select&gt;
  </code></pre>