html5 datalist 不同颜色的不同选项答案

【问题标题】：html5 datalist different color for different optionshtml5 datalist 不同颜色的不同选项
【发布时间】：2014-08-02 13:50:42
【问题描述】：

我有以下代码示例：

 <label>
  Enter your favorite cartoon character:<br />
  <input type="text" name="favCharacter" list="characters" maxlength="50" style="width:95%;">
   <datalist id="characters">
    <option value="Homer Simpson">
    <option value="Bart">
    <option value="Fred Flinstone">
   </datalist>
 </label>

是否可以设置“Bart”选项的样式，例如将其涂成黄色 - 样式=“颜色：黄色”？

【问题讨论】：

标签： css html cross-browser styles

【解决方案1】：

浏览器为这些元素（datalist、select、option）定义了自己的样式，而您无法设置它们的样式。

【讨论】：

【解决方案2】：

您可以使用CSS 与使用属性访问：

option[value="Bart"] {
    color: yellow;
}

这会将<option value="Bart"> 标签的颜色更改为黄色

【讨论】：

这并不容易，令人惊讶的是有人已经对此表示赞同。