HTML/CSS: nidificato <options> in un campo <select>?

Question

È possibile creare campi di opzione annidati in un modulo a discesa, proprio come se si creerebbero elenchi ul annidati?

Poiché il cambiamento è solo estetico, è possibile farlo con css?

Answer 1

È possibile utilizzare <optgroup> per creare un unico livello di nidificazione ...

<select> 
    <optgroup label="Options 1"> 
    <option>Option 1.1</option> 
    <option>Option 1.2</option> 
    </optgroup> 
    <optgroup label="Options 2"> 
    <option>Option 2.1</option> 
    <option>Option 2.2</option> 
    </optgroup> 
</select> 

Esempio: http://jsfiddle.net/JaZAm/1/

Nota che le etichette del gruppo non sono opzioni selezionabili. In tal caso, raccomanderei l'uso della soluzione text-indent che è menzionata nella risposta più alta alla domanda a cui è collegata la casa nel suo commento.

Answer 2

Non è possibile nidificare più <option> s. Se si desidera raggruppare gli elementi <option>, utilizzare <optgroup>.

Answer 3

No, non proprio. Esiste un tag optgroup che è un'intestazione non selezionabile che è possibile aggiungere tra le sezioni, ma l'annidamento non è possibile per gli elementi <select>.

Answer 4

Cerca nell'uso del tag optgroup. Per quanto riguarda il supporto dello stile, ce ne sono alcuni, ma sei in balia del browser per quanto puoi prenderlo in quanto elemento di forma.

http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single-optgroup/

Se avete bisogno profondo restyling, considerare la costruzione di tuo widget UI utilizzando forse un nidificato UL struttura e dandogli l'interazione tramite JavaScript.