将图像添加到下拉列表 (CSS/HTML) 和移动响应答案

【问题标题】：Add an image to a drop down list (CSS/HTML) and mobile responsive将图像添加到下拉列表 (CSS/HTML) 和移动响应
【发布时间】：2018-01-15 07:20:12
【问题描述】：

我目前正在创建一个下拉列表，点击后它会导航到不同国家/地区的网站版本。

我想在国家名称左侧添加一个标志，但内联样式不适用于链接。

<form id="country-select">
              <select onchange="window.open(this.options[this.selectedIndex].value)">
                <option style="background-image:url('www.imagelink.png');" value="">USA</option>
                <option style="background-image:url('www.imagelink.png');" value="shop link">CANADA</option>
                <option style="background-image:url('www.imagelink.png');" value="shop link">JAPAN</option>
                <option style="background-image:url('www.imagelink.png');" value="shop link">ITALY</option>
                <option style="background-image:url('www.imagelink.png');" value="shop link">FRANCE</option>
                <option style="background-image:url('www.imagelink.png');" value="shop link">SPAIN</option>
                <option style="background-image:url('www.imagelink.png');" value="shop link">GERMANY</option>
                <option style="background-image:url('www.imagelink.png');" value="shop link">CHINA</option>
                <option style="background-image:url('www.imagelink.png');" value="shop link">WORLD</option>
              </select>
            </form>

此代码可在 PC 上完美运行，但无法在移动设备上运行。

有人有什么建议吗？

谢谢

【问题讨论】：

查看stackoverflow.com/a/33123117/4659987
@CenkYAGMUR 抱歉，我希望它们始终出现，而不是在单击下拉箭头后出现 - 不过谢谢！
我不明白你想要什么，但也许你可以检查一下github.com/blazeworx/flagstrap
@CenkYAGMUR 你给我的下拉菜单不会一直显示地图，只有在打开下拉菜单时它才会出现在所有国家的旁边。我希望地图显示在当前选择和选择国家/地区时...还有我的点击导航中断

标签： html css responsive

【解决方案1】：

您需要创建自定义下拉菜单。您可以使用select2 或chosen js libraray。浏览他们的文档如何添加标志。

【讨论】：

我正在更新 shopify 布局，所以我不确定（也不是很有信心）将其添加到流动布局中 - 您有什么建议吗？