通过 JS 向 SELECT 标记添加选项 ..不是 CSS 样式的吗？答案

【问题标题】：Adding options to SELECT tag via JS ..Are not styled by CSS?通过 JS 向 SELECT 标记添加选项 ..不是 CSS 样式的吗？
【发布时间】：2009-09-14 20:45:56
【问题描述】：

我有一个如下所示的选择标签：

<select style="background:#fa7171; color:#FFFFFF;" name="product_type_sub" id="product_type_sub" onChange="ajaxFunction(1);">
    <option value="None Selected">None Selected</option>
</select>

你可以看到 inline css 说字体应该是白色的，而且一开始是白色的。但我使用 Javascript 和 Ajax 添加/删除更多选项。

这是我添加选项的方法：

next.options[i+1]=new Option(newFields[i], newFields[i], false, false);

但是我添加的任何选项都不是白色字体，它们会忽略 CSS，有没有办法强制执行此操作？

谢谢！！

【问题讨论】：

你在什么浏览器中看到这个？
直接在option元素上设置背景色是否有效？
我知道对选项元素的背景相关规则的支持并不广泛。例如，某些浏览器完全忽略背景颜色（IIRC、Chrome 和 Safari）。我不确定它是否与“颜色”规则相同。
@crescentfresh，我看到这种情况只发生在 Chrome 中，抱歉之前没有指定。
@Kangax，根据我正在展示如何添加选项的脚本，我将如何为选项设置样式？谢谢。

标签： javascript css html-select

【解决方案1】：

直接在选项元素上设置颜色。例如：

var optionEl = new Option(newFields[i], newFields[i], false, false); 
optionEl.style.color = 'red'; 
next.options[i+1] = optionEl;

【讨论】：