オプションで画像が表示されないのはなぜですか？

Question

私はオートコンプリートオプションのサムネイルを作成しようとしていますが、私のコードに間違っているcss.whatを使用してもオプションで画像を見ることができませんでしたか？私はすべてのオプション異なるイメージのための話だし、それが唯一のfirefox

select { 
 
    width: 300px; 
 
    padding: 10px; 
 
    border: 1px solid #ccc; 
 
} 
 

 
option { 
 
    padding: 10px; 
 
}

<select> 
 
<option>Option 1 <img src="https://cdn4.iconfinder.com/data/icons/web-development-5/500/coffee-break-html-code-64.png"></option> 
 
<option>Option 2 <img src="https://cdn4.iconfinder.com/data/icons/web-development-5/500/checked-www-domain-window-64.png"></option> 
 
</select> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

あなたはこの方法でそれを行う必要があるが、私は私のプロジェクトの一つでみました。次のように

<select> 
    <option style="background-image:url(option1.png);">option 1</option> 

    <option style="background-image:url(option2.png);">option 2</option> 

</select> 

またはより良い結果のため

はそれを実行します。

HTML：

<select id="selection"> 
    <option>option 1</option> 

    <option>option 2</option> 

</select> 

CSS：

select#selection option[value="option 1"] { background-image:url(option1.png); } 


select#selection option[value="option 2"] { background-image:url(option2.png); } 

の

Answer 2

あなたができないのが働くので、私はスタイルの背景を使用したくない、だけFirefoxで追加することが可能です選択の背景画像：ドドマの大学でソフトウェア工学における科学の私の学士号を取りながら

<select> 
    <option style="background-image: url(images/1.jpg)">Option1 </option> 
    <option style="background-image: url(images/2.jpg)">Option2 </option> 
</select>