Question

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

我已尝试过不同的jQuery和bootstrap插件，但他们正在做的是毁掉我以前的选择框样式并动态添加自己的样式。

我想仅使用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>

但是没有得到任何结果，我被困了请帮忙

Answer 1

您无法为选项标记背景图片。

一个解决方案是创建自己的＆＃34;选择＆＃34;成分

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

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

还有一些javascript来处理显示和隐藏＆＃34; li＆＃34;元素

Answer 2

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

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

2 个答案: