SELECT要素の画像

Question

CSSの背景画像プロパティを使用して、HTMLドロップダウンフォーム要素のオプションの横に画像を表示する方法を知っています。

ただし、画像は選択した要素に表示されません。これを行う方法はありますか（できればCSSだけを使用します）？

EDIT：

ここでは、リスト要素のための作業コードの一例です。ドロップダウンが閉じているときしかし、あなただけのイメージなしで、選択した要素のテキストを参照してください。クロスブラウザの方法でこれを行う

<select name="form[location]"> 
    <option value="ad" style="background: url(img/flags/ad.gif) no-repeat; padding-left: 20px;">Andorra</option> 
    <option value="ae" style="background: url(img/flags/ae.gif) no-repeat; padding-left: 20px;">United Arab Emirates</option> 
    <option value="af" style="background: url(img/flags/af.gif) no-repeat; padding-left: 20px;">Afghanistan</option> 
    <option value="ag" style="background: url(img/flags/ag.gif) no-repeat; padding-left: 20px;">Antigua and Barbuda</option> 
    <option value="ai" style="background: url(img/flags/ai.gif) no-repeat; padding-left: 20px;">Anguilla</option> 
    <option value="al" style="background: url(img/flags/al.gif) no-repeat; padding-left: 20px;">Albania</option> 
    <option value="am" style="background: url(img/flags/am.gif) no-repeat; padding-left: 20px;">Armenia</option> 
    <option value="an" style="background: url(img/flags/an.gif) no-repeat; padding-left: 20px;">Netherlands Antilles</option> 
    <option value="ao" style="background: url(img/flags/ao.gif) no-repeat; padding-left: 20px;">Angola</option> 
    <option value="ar" style="background: url(img/flags/ar.gif) no-repeat; padding-left: 20px;" selected="selected">Argentina</option> 

    [...] - I think you get the idea. 

</select> 

Answer 1

は非常に困難になるだろう、と私は疑い、不可能。

代わりに、選択ボックスのように見え、動作するウィジェットを試したいかもしれませんが、HTMLの場合は& Javascriptを使用しています。私はNicholaidesに同意

jquery.combobox

Answer 2

：

はここでjQueryを使ってそれを行うための一つの方法です。それをHTMLとCSSで厳密に行うことは機能しません。

プログレッシブエンハンスメントテクニックを使用して、JavaScriptを使用していないユーザーやスクリーンリーダーなどを使用するユーザーのために通常の選択ボックスをページに配置してから、JavaScriptを使用して選択ボックスを、ファンシーなウィジェット。