html - リストに小さな画像を追加しますか？

Question

ドロップダウンメニューを作成しました。ドロップダウンリストのテキストの左側に25pxx25pxの画像が必要ですか？試してみるたびに画像が表示されませんか？なんで？どうすれば修正できますか？試しましたが、画像が表示されません。http://jsfiddle.net/Hunter4854/M4Ef2/1/

Answer 1

オプションタグに画像タグを入れることはできないと思います。オプションタグに背景画像とパディングを設定するのが一番です。
スクリプトを見ると、スクリプトが再構築されていることがわかります。そのため、マークアップで.custom-select ul何も失われていません。このフィドル<img>をチェックして、そのコードをコメントアウトしてください。

$('#test_select option').each(function(i){
    html.push('<li rel="'+$(this).val() +'">'+$(this).text()+'</li>');
});

$('.custom-select ul').html(html.join(''))

Answer 2

試す：

.custom-select ul {
  ...
  background: url("myimage.png") left top no-repeat;
  padding-left: 50px;
}

Answer 3

私が何かを見逃していない限り、なぜ人々がで何かを提案しているのかわかりません<li>。ドロップダウンに25x25の画像を表示する場合は、次を使用します。

CSS

select#test_select option[value="graphic designer"] {
 background: url("myimage.png") left top no-repeat;
 padding-left: 50px;  
} // continue with every value