/ / Wyświetlanie atrybutu nazwy w znaczniku <select> w górnej części menu - html, css, select, rozwijane menu

Wyświetlanie atrybutu nazwy w znaczniku <select> u góry menu - html, css, select, drop-down-menu

Koduję rozwijane menu za pomocą tagu. Czy istnieje sposób, aby HTML lub CSS umieścił Nazwa atrybut tagu u góry menu? Więc kiedy to się zawaliło Nazwa jest wyświetlany.

Więc:

<select name="animals">
<option>Dogs</option>
<option>Cats</option>
</select>

Niezależnie od tego, czy menu jest zwinięte, „zwierzęta” znajdują się w oknie, a jeśli się rozwinęło, „zwierzęta” są na górze.

The <optgroup> tag nie jest tym, czego szukam.

Odpowiedzi:

2 dla odpowiedzi № 1

Nie można tego zrobić bez:

1) js, aby zachować wartość listy rozwijanej, i zastąp opcje opcją „zwierzęta” na wymianę.

lub

2) wykonaj niestandardowe rozwijanie.

wybrane elementy są jednym z tych nielicznych „rodzimych” elementów sterujących. Niewiele można z nimi zrobić, oprócz tego, do czego zostali zmuszeni.


1 dla odpowiedzi nr 2

Możesz użyć details element zgodnie z HTML5:

<details>
<summary>animals</summary>
<select name="animals">
<option>Dogs</option>
<option>Cats</option>
</select>
</details>

Obsługa przeglądarki jest nadal ograniczona (wygląda dobrze na OKJednak Chrome), więc możesz wziąć pod uwagę techniki JavaScript (w różnych bibliotekach jest ich prawdopodobnie kilkadziesiąt). Jednakże, jeśli powrót (tekst „zwierzęta” pojawia się przed listą rozwijaną) jest akceptowalny lub jeśli uważasz, że możesz łatwo nadać mu styl lub napisać go w sposób akceptowalny, jest to proste podejście.