HTML/CSS: anidado <options> en un campo <select>?

Question

¿Es posible crear campos de opción anidados en un menú desplegable de formulario, al igual que crearía listas ul anidadas?

Puesto que el cambio es sólo estético, es posible hacer esto con CSS?

Answer 1

Puede utilizar <optgroup> para crear un único nivel de anidamiento ...

<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> 

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

Tenga en cuenta que las etiquetas de grupo no son opciones seleccionables. En ese caso, recomendaría usar la solución de sangría de texto que se menciona en la respuesta principal a la pregunta a la que se vinculó el hogar en su comentario.

Answer 2

No puede anidar múltiples <option> s. Si desea agrupar elementos <option>, use <optgroup>.

Answer 3

No, realmente no. Hay una etiqueta optgroup que son encabezados no seleccionables que puede agregar entre secciones, pero la anidación no es posible para elementos <select>.

Answer 4

ver en el uso de la etiqueta optgroup. En cuanto al soporte de estilo, hay algunos, pero usted está a merced del navegador en cuanto a qué tan lejos puede tomarlo, ya que es un elemento de formulario.

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

Si necesita extensa remodelación, considerar la construcción de su propio widget de interfaz de usuario utilizando tal vez un UL estructura anidada y dándole la interacción a través de JavaScript.