[英]How to put background image in select option tag using css
我有一个从 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>
但没有得到任何结果,我被困住了请帮忙
您不能为选项标签提供背景图像。
一种解决方案是创建您自己的“选择”组件。
<ul>
<li>option1</li>
<li>option2></li>
..
</ul>
然后你给一些 css 看起来像一个选择输入。
还有一些 javascript 来处理显示和隐藏“li”元素
它不可能作为选项标签。 您可以使用自定义下拉列表。 http://tympanus.net/Tutorials/CustomDropDownListStyling/index2.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.