html5 datalist 不同颜色的不同选项

Posted 2023-02-22

【中文标题】html5 datalist 不同颜色的不同选项

【英文标题】：html5 datalist different color for different options

【发布时间】：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”选项的样式，例如将其涂成黄色 - 样式=“颜色：黄色”？

【参考方案1】：

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

【参考方案2】：

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

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

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

【讨论】：

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