我只是试图生成一个带有彩色方块的bootstrap选择，代表选项元素的颜色代码。 （参见最后的小提琴，灰度示例）
我最初的想法是在选项中创建两个标签，一个用于颜色方块，一个用于文本。但是，选项标签不允许子DOM元素。
我的第二个是使用字体真棒字形，正方形，然后使用:: first-letter伪元素选择器设置样式。那也是不成功的。我最初虽然这是因为选项标签是内联元素，因为:: first-letter仅适用于块元素，但似乎并非如此。我的选项是块元素，但是* :: first-element选择器只会改变标签，标题等中第一个字母的颜色。
由于我无法在选项中的标准-tag中创建fa-icons，我使用此语法来显示字形：
<select class="form-control" id="ActionType"
style="font-family: 'FontAwesome', Helvetica;">
<option value="insert"> Insert</option>
<option value="delete"> Delete</option>
<option value="update"> Update</option>
</select>
这使用unicode来引用字形，它起作用，除了我无法使颜色起作用的事实。 代表图标fa-stop，这几乎是一个正方形
这是一个JSfiddle，它显示了我想要的结果，除了颜色。我将接受任何可以提供视觉上类似解决方案的答案，该解决方案适用于bootstrap-setup。当然，我还需要实际工作的颜色。在此示例中，我对其进行了简化，并将*::first-letter设置为red。