如何使用 css 在選擇選項標簽中放置背景圖像

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

您不能為選項標簽提供背景圖像。

一種解決方案是創建您自己的“選擇”組件。

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

然后你給一些 css 看起來像一個選擇輸入。

還有一些 javascript 來處理顯示和隱藏“li”元素

Answer 2

它不可能作為選項標簽。 您可以使用自定義下拉列表。 http://tympanus.net/Tutorials/CustomDropDownListStyling/index2.html