Html5数据显示不同的颜色用于不同的选项

Question

我有以下代码示例:

 <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"选项设置样式，例如将其涂成黄色-Style ="color: yellow" ?

Answer 1

浏览器为这些元素定义了自己的样式(datalist, select, option)，你不能给它们设置样式

Answer 2

您可以使用CSS使用属性访问:

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

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