Question

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

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

<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上运行良好，但在移动设备上无效。

有人有任何建议吗？

谢谢

Answer 1

您需要创建自定义下拉列表。你可以使用select2或chosen js libraray。阅读他们的文档，了解如何添加标记。

将图像添加到下拉列表（CSS / HTML）和移动响应

1 个答案: