html - 在列表中添加小图像？

Question

我做了一个下拉菜单。我需要下拉列表文本左侧的 25px x 25px 图像吗？每次我尝试，图像都不会出现？为什么？我该如何解决？我已经尝试过，但图像永远不会出现。http://jsfiddle.net/Hunter4854/M4Ef2/1/

Answer 1

尝试：

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

Answer 2

我认为您不能将图像标签放在选项标签中，最好的办法是在选项标签上设置背景图像和填充。
如果您查看脚本，您会发现它重建了.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 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