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

Question

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

score 16 · Accepted Answer

是的，它是有效的。

来自W3Schools网站：

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

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

编辑：自从我写了这个答案后，我注意到W3Schools 可能不是最可靠的优质信息来源。先前的答案完全没有错误，但它来自已被证明有些不一致/不完整的来源。因此，我认为我还应该在此处附加此主题的更官方链接。

score 3 · Accepted Answer

根据HTML 4.01 建议的相关部分，该class属性是有效的。HTML5 草案，包括 HTML5 CR，甚至更加宽松：它们允许在任何元素上。optionclass

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

score 2 · Accepted Answer

是的！

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

但是，对于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

score 1 · Accepted Answer

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