Question

我在select-tag选项标记标记中显示了一个国家/地区列表，我想要做的是在其名称旁边加上国家/地区的标记。

我尝试在select-option标记内插入img标记，但它不起作用。

请帮忙

感谢

Answer 1

在Firefox中，您可以使用背景图像，但至少IE6和IE7不支持此功能。没有纯html / css解决方案可以在所有操作系统和浏览器中保持一致。

您唯一能做的就是创建没有图像的选择框，然后使用Javascript将该框替换为一组自定义输入，这看起来像一个选择框，但允许更多自定义。然后，如果用户关闭了Javascript，则会向他们显示没有图像的标准选择框。否则，他们会看到漂亮的选择框。

这将非常复杂，所以我建议您使用Javascript框架，例如Mootools和插件用于此目的，例如MavSelectBox

Answer 2

这可能是 NOT 。您不能在选择下拉列表中包含图像，也不能为选项设置单独的背景。你可以做这样的事情的唯一方法是建立自己的选择下拉元素。最常见的方法是简单地为选择元素设置onchange事件，该事件将根据当前选择的选项更改其旁边的图像。

选项元素可用的 ONLY 背景属性是background-attachment，background-color，background-position-x和background-position-y。

Answer 3

标准下拉列表无法实现。

查看设备（“Utrustning”）选择下拉列表here。我们只是替换了折叠div的下拉列表，因此它可以包含您喜欢的任何html。

Answer 4

尝试使用background CSS（通过style或class）设置图片。您还需要padding或类似的东西，以便文本不会与标志重叠。

Answer 5

试试这个..

<强> CSS

<style>
  .test1 { background:url(../images/folder-blue.gif) no-repeat; padding-left:16px;}
</style>

<select>
    <option class="test1">Test 1</option>
    <option class="test2">Test 2</option>
    <option class="test3">Test 3</option>
</select>

Answer 6

<select>
    <option style="background-image: url('images/us.gif') no-repeat left center; padding-left: 20px;">USA</option>
    <option style="background-image: url('images/fr.gif') no-repeat left center; padding-left: 20px;">France</option>
</select>

或者，您可以使用<LI>，HTML / CSS和隐藏的表单字段来执行此操作。

如何包含<selection> <option>的图像？</option> </selection>

6 个答案: