Estou codificando um menu suspenso com a tag. Existe uma maneira com HTML ou CSS para colocar o nome atributo da tag na parte superior do menu? Então, quando ele entrou em colapso, nome é exibido.
Assim:
<select name="animals">
<option>Dogs</option>
<option>Cats</option>
</select>
Se o menu está recolhido, "animais" está na janela ou se foi expandido, "animais" está no topo.
o <optgroup> A tag também não é exatamente o que estou procurando.
Respostas:
2 para resposta № 1Isso não pode ser feito sem:
1) js para reter o valor da lista suspensa e substitua as opções por "animais" na troca.
ou
2) faça um menu suspenso personalizado.
elementos selecionados são um desses controles "nativos" não-estilizáveis. Você não pode fazer muito com eles além do que eles foram feitos para fazer.
1 para resposta № 2
Você pode usar o details elemento conforme HTML5:
<details>
<summary>animals</summary>
<select name="animals">
<option>Dogs</option>
<option>Cats</option>
</select>
</details>
O suporte ao navegador ainda é limitado (parece OK emNo entanto, o Chrome), então você pode considerar técnicas de JavaScript (provavelmente existem dezenas de alternativas para isso em diferentes bibliotecas). No entanto, se o fallback (o texto “animais” que aparece antes da lista suspensa) for aceitável ou se você acha que pode estilizar ou escrever com facilidade algo aceitável, essa é uma abordagem simples.