我们可以在option元素中添加class属性吗？

Question

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

Answer 1

是的，它是有效的。

来自 W3Schools 网站：

该标签还支持 HTML 中的全局属性。

class

属性是其中的一部分。请注意，

option

标签经常存在与您所使用的浏览器相关的格式问题，因此它的样式设置可能有点棘手。

如果您担心W3Schools 可能不是好信息的最可靠来源，这里有一个更官方链接到该主题，网址为W3.org。

Answer 2

根据 HTML 4.01 建议的

相关部分

，

class

属性对于 option 有效。 HTML5 草案，包括 HTML5 CR，甚至更加宽松：它们允许

class

我的猜测是，您真正想问的是是否可以使用

option

属性和 CSS 将某些

class

元素设置为与其他元素不同的样式。那么答案是，这取决于浏览器 - 不是由于识别

class

属性的问题，而是由于其实现在下拉列表中的样式项方面部分不受 CSS 影响。

Answer 3

是的！

在 HTML 中，向

class

元素添加

option

属性是有效的 ^[1]。

对于 CSS 影响，可用性是有限的。特别是当涉及到

option

标签时，因为它受操作系统的表单控制处理程序^[2]的约束。这就是为什么下面的代码示例不会在所有浏览器上实际工作的原因。

超文本标记语言

<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 操作代码...将会起作用。

超文本标记语言

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

JavaScript 与 jQuery

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

Answer 4

是的

class

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