如何使用css将背景图像放在选择选项标签中答案

【问题标题】：How to put background image in select option tag using css如何使用css将背景图像放在选择选项标签中
【发布时间】：2015-07-29 17:57:07
【问题描述】：

我有一个从 json 响应接收的国家下拉列表，并希望在国家名称旁边添加相应的国家标志图标（也从 json 响应获取图像）。

我为此尝试了不同的 jQuery 和引导插件，但它们正在破坏我之前的选择框样式并动态添加它们自己的样式。

我只想使用 CSS 来实现。

到目前为止尝试过的代码：

<select class="form-control icon-menu" name="country" id="country_id" onchange="fetchCountryCode(this.value);">
   <?php
       foreach ($countries as $countriesList) {
         echo '<option value=' . $countriesList['id'] .' style=" background-image : url('. $countriesList['flag_url'] .')" data-imagecss="flag ad">' . $countriesList['name'] . '</option>';
        }
    ?>
</select>

CSS：

<style>
select.icon-menu option {
    background-repeat:no-repeat;
    background-position:bottom left;
    padding-left:30px;
}
</style>

但没有得到任何结果，我卡住了请帮助

【问题讨论】：

内联 css 不应该像这样吗？ style="background-image: url();"
哎呀....我注意到了错误，但我更正了它。但静止图像不存在:(这是我在 chrome 中检查元素后得到的：<option value="1" style=" background-image : url(http://assets.mvendr.com/flags/64/ZA.png)" data-imagecss="flag ad">South Africa</option>
它在Mozilla Firefox中可见....但没有显示何时选择国家/跨度
请提供一个jsfiddle。
@VIVEKRAJ：这是小提琴jsfiddle.net/q27fortw

标签： php html css

【解决方案1】：

你不能给选项标签一个背景图像。

一种解决方案是创建您自己的“选择”组件。

<ul>
     <li>option1</li>
     <li>option2></li>
     ..
</ul>

然后你给一些 css 看起来像一个选择输入。

还有一些 javascript 来处理显示和隐藏“li”元素

【讨论】：

您必须使用插件，因为如果您尝试开发精选插件，您会浪费很多时间。我推荐给你的插件是jQuery的选择，或者jQuery的select2。 harvesthq.github.io/chosen 运行有效

【解决方案2】：

它不可能作为选项标签。您可以使用自定义下拉列表。 http://tympanus.net/Tutorials/CustomDropDownListStyling/index2.html

【讨论】：

这些插件隐藏了我以前的选择框样式并添加了自己的.....如何克服这个问题
你必须编辑他们的css。或者你必须链接你自己定制的css。