HTML：在选择标签处插入图像答案

【问题标题】：HTML: insert image at select tagHTML：在选择标签处插入图像
【发布时间】：2016-09-22 02:13:11
【问题描述】：

问题

我想让我的选择标签像谷歌的标签这是我的

这是我的代码

 `<script >
        function format(state) {
            if (!state.id) return state.text;
            return "<img class='flag' src='Photos/" + state.id.toLowerCase() + ".jpg'/>" + $(originalOption).data('foo') + "' />" + state.text;
        }
</script>
<select id="mobilephone">
    <option value="indo" ><img src="Photos/indo.jpg" id="captchaimg">Indonesia</option>
    <option style="background-image:url(Photos/rico.png);">Rico</option>
    <option style="background-image:url(Photos/SA.png);">South Africa</option>
    <option style="background-image:url(Photos/UK.jpg);">United Kingdom</option>
</select>`

我想让它像下图一样

【问题讨论】：

看看JavaScript image combobox CSS 不起作用，因为不同的浏览器对待select 下拉菜单的方式不同。
@APAD1 不行，老兄，已经按照步骤了
它工作正常，我已经多次使用该库。这是一个示例页面，其中包含您正在尝试做的事情：marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/…
@APAD1 听不懂老兄。你不能给我更简单的例子吗？从你的也许？只是重要的部分请：D
@KiraKatou阅读APAD1链接的URL上的源码

标签： html css

【解决方案1】：

您可以简单地为每个标志使用表情符号。

<select id="mobilephone"> 
    <option selected disabled>Select country</option>
    <option>?? Indonesia</option>
    <option>?? Puerto Rico</option>
    <option>?? South Africa</option>
    <option>?? United Kingdom</option>
</select>

【讨论】：

【解决方案2】：

如果您使用的是 jQueryUI，那么这可能会起作用：http://jqueryui.com/selectmenu/#custom_render

这看起来很整洁：http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx

您不能直接使用<select> 标记来执行此操作，因为它是一个表单元素，但您可以使用<div> 或其他方法来实现此操作。

解决方法可能是：

<select>
    <option style="background-image:url(something.png);">male</option>
    <option style="background-image:url(something.png);">female</option>
    <option style="background-image:url(something.png);">others</option>
</select>

但这仅适用于 Firefox :(

我个人建议使用上面的一些 JS 小部件库。

希望这会有所帮助！

【讨论】：

我需要使用选择标签，这是我的任务 :( 如果使用这种方式，我可以做到这一点