Html 如何跨越颜色块和选项标记中的文本

这不就这么简单吗

<select>
<option>Red<span style="width:7px;height:7px;background:red"></span></option>
<option>Green<span style="width:7px;height:7px;background:green"></span> 
</option>
</select>

红色
绿色

试图实现如下输出

有人知道怎么做吗

这不就这么简单吗

不，不是那么容易。您的浏览器将清理选项标记中的所有数据

---

这可能不是您想要的，但我更喜欢这样做：

<select>
  <option style="background:red;">Red</option>
  <option style="background:blue;">Blue</option>
  <option style="background:green;">Green</option>
</select> 

红色
蓝色
绿色

您不能在选择选项上使用其他

html

标记或

css

样式。但您可以使用第三个库来渲染下拉列表，并将其用作选择。例如

Bootstrap

$（函数（）{
$（“#我的选择”）。查找（'li'）。单击（函数（）{
$（'#selected'）.html（$（this.html（））；
});
});

颜色





请看这篇文章，希望对你有所帮助/指导。你可以看这篇文章[很抱歉，上面的链接对我没有帮助，但我正在寻找像图片中那样的输出。我的背景颜色不应该按照我的要求填充整个区域。在上面的方法中，如果你说浏览器会进行清理。任何替代像图片中那样的输出的方法对我来说都很好。请建议。一个ext问题的答案。我很想知道使用第三方select2库获得相同的输出，因为它还有一个在下拉列表中搜索选项的选项。有什么想法如何使用select2实现这一点吗？我从未使用过该库，但我可以在文档中看到有一个部分，他们使用了一个带有标志的示例。尝试用你的颜色系在旗帜上，它应该会起作用。