Podemos adicionar atributo de classe no elemento opção?
quero adicionar classe para o meu elemento de opção. É válido adicionar um atributo de classe no elemento de opção HTML?
4 answers
Sim, é válido.
Do sítio Web W3Schools :
The <option> tag also supports the Global Attributes in HTML.
Do qual o atributo class faz parte. Por favor, note que muitas vezes, a marca option tem problemas de formatação em relação ao navegador que você está usando, então o estilo pode ser um pouco complicado.
EDIT: desde que escrevi esta resposta, chegou à minha atenção que w3schools provavelmente não é a fonte mais confiável de boa informação. A resposta anterior não está errada., mas veio de uma fonte que provou ser algo inconsistente/incompleta. Como tal, acho que também deveria adicionar um link Mais oficiala este assunto aqui.
O atributo class é válido para option de acordo com a parte relevante da recomendação HTML 4.01. Os rascunhos do HTML5, incluindo o HTML5 CR, são ainda mais permissivos: permitem class literalmente em qualquer elemento .
O meu palpite é que o que realmente querias perguntar era se podias classificar alguns elementos option de forma diferente dos outros, usando atributos class e CSS. Então a resposta é que isso depende do navegador-não devido a problemas em reconhecer {[[0]} atributos mas devido a implementações de que são parcialmente imunes a CSS no que diz respeito a styling itens em uma lista dropdown.
Sim class pertence a atributos globais. Qualquer elemento pode tê-lo.
No HTML é válido adicionar um atributo class a um elemento option [1].
No entanto...
No entanto, a usabilidade é limitada. Especialmente quando se trata da etiquetaoption porque está sujeita aos controladores de formulários do sistema operativo[2]. Esta é a razão pela qual a amostra de código abaixo não irá realmente funcionar ao longo de todos navegador.
GALERIA
<select>
<option>Centaur</option>
<option class="colored">Unicorn</option>
</select>
.colored {
background-image: url('my-colorful-background.png'); // e.g.: Apple doesn't recognize this rule
}
Para implicações JavaScript (w / jQuery), a usabilidade é totalmente suportada quando se trata de objetos DOM. A razão pela qual um código de DOM-manipulação assim... vai funcionar.
GALERIA<select>
<option>Centaur</option>
<option class="colored">Unicorn</option>
</select>
var label = jQuery('.colored').html();
console.log( label ); // outputs Unicorn