Html 选择输入的自定义选项背景

我试图在我的HTML表单中自定义我的标记。我希望选择输入中的每个选项都有不同的背景颜色。我开始使用，然后试图改变它，但后来它完全消失了。我知道HTML、CSS和一些JS。我的选择菜单有不同的颜色，每种颜色都应该有相应的颜色背景。例如，“红色”选项将有红色背景和白色文本等

这是我的密码：

<select>
    <option style="background-color: #fff;" value="0">Select colour:</option>
    <option style="background-color: #00f;" value="1">Blue</option>
    <option style="background-color: #fff;" value="2">White</option>
    <option style="background-color: #f40;" value="3">Orange</option>
    <option style="background-color: #0f0;" value="4">Green</option>
</select>

选择颜色：
蓝色
白色
橙色
绿色

然而，这没有任何效果。我想在使用尽可能少的语言的同时做到这一点。你知道这是否可行吗？

---

谢谢

最简单的方法是给每个选项一个单独的ID，就像这样

。然后 然后在页面的

中键入如下内容：

<style>

#red { 
background-color: red;
}

#green{ 
background-color: green;
}

#yellow{ 
background-color: yellow;
}

</style>

#红色{
背景色：红色；
}
#绿色{
背景颜色：绿色；
}
#黄色{
背景颜色：黄色；
}

---

如果这不是你的意思，请评论

由于您希望使用尽可能少的语言，这里有两种方法仅使用HTML和CSS：

数据属性或类 虽然T B Duzijn提供的解决方案是可行的，但我相信使用类似于数据bg color=“red”或class=“bg color red”的方法会比id=“red”更好，因为它以后可以重复使用（id应该始终是整个文档中的唯一标识符）

HTML:

<option data-bg-color="blue" value="1">Blue</option>

CSS自定义属性 根据您想要支持的浏览器（支持非常好，包括Edge，但没有IE），您也可以使用如下自定义属性：

<option style="--mycolor:blue;" value="1">Blue</option>

---

这大大减少了不同颜色相同CSS规则的重复

不能跨浏览器设置

选择
或
选项
元素的样式。您唯一的实际选择是将select元素完全替换为其他可以设置样式的HTML元素（div、ul、li等）
<option style="--mycolor:blue;" value="1">Blue</option>

option {
  background: var(--mycolor);
}