我们可以在选项元素中添加类属性吗？答案

【问题标题】：Can we add class attribute in option element?我们可以在选项元素中添加类属性吗？
【发布时间】：2013-08-28 14:56:03
【问题描述】：

我想为我的选项元素添加类。在 HTML 选项元素中添加类属性是否有效？

【问题讨论】：

【解决方案1】：

是的，它是有效的。

来自W3Schools 网站：

The <option> tag also supports the Global Attributes in HTML.

class 属性是其中的一部分。请注意，option 标签通常存在与您使用的浏览器有关的格式问题，因此设置样式可能有点棘手。

编辑：自从我写了这个答案后，我注意到W3Schools probably isn't the most reliable source 的好信息。先前的答案完全没有错误，但它来自已被证明有些不一致/不完整的来源。因此，我认为我还应该在此主题here 上附加一个更官方的链接。

【讨论】：

【解决方案2】：

根据 HTML 4.01 建议的 relevant part，class 属性对 option 有效。 HTML5 草案，包括 HTML5 CR，更加宽松：它们允许 class 字面意思为 on any element。

我的猜测是，您真正想问的是，您是否可以使用 class 属性和 CSS 为某些 option 元素设置与其他元素不同的样式。那么答案是，这取决于浏览器——不是因为识别class 属性的问题，而是因为在设置下拉列表中的项目样式方面，其实现部分不受CSS 影响。

【讨论】：

【解决方案3】：

是的！

在 HTML 中，将class 属性添加到option 元素是有效的^[1]。

但对于 CSS 影响，可用性是有限的。特别是当涉及到option 标记时，因为它受操作系统的表单控制处理程序^[2] 的约束。这就是为什么下面的代码示例不会实际上适用于所有浏览器。

HTML

<select>
    <option>Centaur</option>
    <option class="colored">Unicorn</option>
</select>

CSS

.colored {
    background-image: url('my-colorful-background.png'); // e.g.: Apple doesn't recognize this rule
}

对于 JavaScript 影响（w/jQuery），当涉及到 DOM 对象时，可用性得到完全支持，但仍受上述 CSS 影响的限制。因此，像这样的 DOM 操作代码......将起作用。

HTML

<select>
    <option>Centaur</option>
    <option class="colored">Unicorn</option>
</select>

带有 jQuery 的 JavaScript

var label = jQuery('.colored').html();
console.log( label ); // outputs Unicorn

【讨论】：

【解决方案4】：

是class 属于全局属性。任何元素都可以拥有它。

【讨论】：