HTML:在选择标记处插入图像
HTML:在选择标记处插入图像
提问于 2016-05-25 02:03:02
问题
我想让我的select标签像google的标签一样，this is my
这是我的代码
`<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>`我想让它像下面的图片一样
回答 2
Stack Overflow用户
发布于 2016-05-25 02:52:26
如果您使用的是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小部件库。
希望这能有所帮助！
Stack Overflow用户
发布于 2021-07-27 18:22:17
你可以简单地使用每个标志的表情符号。
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37420781
复制相关文章
相似问题