Question

我正在尝试以HTML形式自定义标签。我希望选择输入中的每个选项都具有不同的背景色。我开始使用this link，然后尝试对其进行更改，但随后它完全消失了。我知道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>

但是，这没有任何作用。我想在使用尽可能少的语言的同时做到这一点。任何想法这是否可能？谢谢

Answer 1

最简单的方法是给每个选项一个单独的ID，例如<option id="red"></option>。然后然后，在页面的<head> </head>中输入如下内容：

<style>

#red { 
background-color: red;
}

#green{ 
background-color: green;
}

#yellow{ 
background-color: yellow;
}

</style>

如果这不是您的意思，请发表评论！

Answer 2

由于您希望使用尽可能少的语言，因此以下两种方法仅使用HTML和CSS：

数据属性或类

虽然 TB Duzijn 提供的解决方案可行，但我相信使用 data-bg-color =“ red” 或 class =“ bg -color-red“ 优于 id =” red“ ，因为以后可以重用（id在整个文档中始终是唯一标识符）

HTML：

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

CSS：

option[data-bg-color="blue"] {
   background: blue;
}

CSS自定义属性

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

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

然后在CSS中：

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

极大地减少了相同CSS规则对不同颜色的重复。

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

2 个答案:

数据属性或类

CSS自定义属性