我不知道浏览器是否支持这个。在div中工作正常，但这不是很语义。
我在这里有一个粗略的模拟我正在寻找的东西：https://jsfiddle.net/mgifford/xjkcgod8/5/
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}
#orange {
color: orange;
}
#apple {
background-image: url("http://icons.iconarchive.com/icons/custom-icon-design/flatastic-7/512/Apple-icon.png");
background-repeat: no-repeat;
background-size: 30px 10px;
}
#cherry {
background-color: red;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple" id="apple">Apple</option>
<option value="orange" id="orange">Orange</option>
<option value="cherry" id="cherry">Cherry</option>
</select>
</body>
</html>基本上我想看到列表中每个项目的国家名称和标志。我只想做一个国家下拉菜单，但HTML让我失望（或者更可能是我的CSS排骨）。
你不能有选项标签的背景图像。如果需要在选项中插入图像，您可以使用这样的插件。
您可以使用此参考中的自定义jquery插件：