html - chrome 和 internet explorer 浏览器的下拉列表中不显示县旗

Question

图像不会显示在 Chrome 或 Internet Explorer 浏览器的下拉列表中，但会显示在 Firefox 浏览器中。这是我的 CSS 代码:

select.icon-menu option {
background-repeat:no-repeat;
background-position:bottom left;
padding-left:30px;
}
select#countries option[value="AF"] {
background-image:url(http://localhost/insurance/wp-content/plugins/arforms/flags/af.png);
}
select#countries option[value="AL"] {
background-image:url(http://localhost/insurance/wp-content/plugins/arforms/flags/al.png);
}
select#countries option[value="DZ"] {
background-image:url(http://localhost/insurance/wp-content/plugins/arforms/flags/dz.png);
}
select#countries option[value="AS"] {
background-image:url(http://localhost/insurance/wp-content/plugins/arforms/flags/as.png);
}
select#countries option[value="AD"] {
background-image:url(http://localhost/insurance/wp-content/plugins/arforms/flags/ad.png);
}

**This is my HTML code**

<select name="countries" id="countries" class="icon-menu">
<option value="">Select Country</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
</select>

Answer 1

你不能设计 <option> IE <9 和 Chromium 中的标签(color 和 background-color 除外)。选项并不意味着要设计样式。

您需要使用类似的列表(或类似的东西)设置替代下拉菜单。