¿Podemos agregar atributos de clase en el elemento de opción?

Quiero agregar clase para mi elemento de opción. ¿Es eso válido agregar un atributo de clase en el elemento de opción HTML?

Sí, es válido

Desde el sitio web de W3Schools :

The  

De que el atributo de class es parte. Tenga en cuenta que a menudo, la etiqueta de option tiene problemas de formato con respecto al navegador que está utilizando, por lo que diseñarlo puede ser un poco complicado.

EDITAR: Desde que escribí esta respuesta, me ha llamado la atención que W3Schools probablemente no sea la fuente más confiable de buena información. La respuesta anterior no está nada mal, pero proviene de una fuente que ha demostrado ser algo inconsistente / incompleta. Como tal, creo que también debería agregar un enlace más oficial a este tema aquí .

El atributo de class es válido para la option acuerdo con la parte relevante de la Recomendación HTML 4.01. Los borradores HTML5, incluido HTML5 CR, son aún más permisivos: permiten class literalmente en cualquier elemento .

Supongo que lo que realmente querías preguntar es si puedes diseñar algunos elementos option diferente a los demás, usando class atributos de class y CSS. Entonces la respuesta es que esto depende del navegador, no debido a problemas con el reconocimiento de class atributos de la class sino debido a las implementaciones de que son parcialmente inmunes a CSS en lo que respecta al diseño de elementos en una lista desplegable.

Sí, la class pertenece a atributos globales. Cualquier elemento puede tenerlo.

Fuente: http://www.w3.org/wiki/HTML/Attributes/_Global

¡Sí!

En HTML, es válido agregar un atributo de class a un elemento de option [ 1 ] .

Sin embargo…

Sin embargo, para las implicaciones de CSS , la usabilidad es limitada. Especialmente cuando se trata de la etiqueta de option porque está sujeta a los controladores de control de formulario del sistema operativo [ 2 ] . Esta es la razón por la que el ejemplo de código siguiente no funcionará en todos los navegadores.

HTML

  

CSS

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

Para las implicaciones de JavaScript (w / jQuery), la usabilidad es totalmente compatible cuando se trata de los objetos DOM. La razón por la cual un código de manipulación DOM como tal … funcionará.

HTML

  

JavaScript con jQuery

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

Referencias

  1. W3C – HTML 4.01 Especificación , Formularios, Elementos SELECT, OPTGROUP y OPTION
  2. MDN : diseño de formularios HTML. ¿Por qué es tan difícil diseñar widgets de formulario con CSS?