HTML Select-Option 两种颜色和名称答案

【问题标题】：HTML Select-Option Two colors and nameHTML Select-Option 两种颜色和名称
【发布时间】：2016-09-06 06:44:38
【问题描述】：

我有一个颜色模型列表可供选择，每个模型都有名称、背景和前景色。

有没有办法在选项中显示具有两种颜色和名称的图标/框？以动态方式，不选择图像（或拥有基础图像然后对其进行转换——更改颜色）。

来自服务器的值如下：

1;BlackOnWhite;#000000;#ffffff
2;WhiteOnBlack;#ffffff;#000000

等等……

我尝试过使用 css：fiddle，但想问是否有可能在选择列表中放置一个彩色框。

谢谢！

【问题讨论】：

向我们展示您的尝试？
你能再解释一下吗？你想要什么样的 html/input 元素？
如果你需要帮助把一些代码..!!
解释 wat 'icon/box with two colors' 的确切含义
我不太确定你想要什么，但我做了一个我认为你想做的演示：jsfiddle.net/thepio/yy3Ljud6。除非您详细解释您真正想要的东西，否则不会将其发布为答案（这不是直接示例，而是更笼统的事情）。

标签： html css angularjs input

【解决方案1】：

根据你的小提琴，我可以想出一个解决方案。

HTML：

<div>
  <select>
    <option>Choose color</option>
    <option ng-repeat="checkbox in checkboxes" class="color-{{checkbox.foreground}}-{{checkbox.background}}">{{checkbox.name}}</option>
  </select>
</div>

如果您想从 HEX 值中删除 #，您只需更改范围变量或执行过滤器等。但我仍然要警告您，浏览器有各种或不支持将 CSS 赋予 <option> 元素.如果您想设置选择元素的样式，您应该尝试使用 Select2 或 Chosen 等插件。

这是一个 JSFiddle：https://jsfiddle.net/thepio/joqdj2cr/

【讨论】：

没问题！很高兴我能帮忙:)