¿Cómo se sangran varios niveles de seleccionar grupo de opciones con CSS?

Solo estoy tratando de aplicar sangrías a los bloques de bloques de juego anidando la profundidad realmente, he intentado con una regla general margin-left, elementos anidados luego tratando de aplicar la misma regla, intenté con padding-left ... ¿está sangrando así? Parece elemental: P¿Cómo se sangran varios niveles de seleccionar grupo de opciones con CSS?

En el ejemplo siguiente, el grupo opcional etiquetado 'client2_a' debe sangrarse más que los demás, porque está anidado dentro de 'client2'.

http://jsfiddle.net/Tb5Rc/5/

Fuente

2011-03-13 danjah

8/29/2016 Edición

La respuesta original a continuación ya no es funcional en los navegadores modernos. Para aquellos que todavía tienen que utilizar una etiqueta en vez de hacer magia con listas HTML, una mejor solución se encontró en este hilo StackOverflow: Rendering a hierarchy of "OPTION"s in a "SELECT" tag

Yo recomendaría la solución sugerida por igor-krupitsky que sugiere dejar & nbsp; y usando el código binario & # 160; en lugar. Al menos en Chrome, esto no se rompe con el teclado para encontrar el primer carácter de un elemento en la lista.

Fin Editar

La especificación HTML actual no prevé la adición de etiquetas anidadas cualquier funcionalidad (por ejemplo, sangrado). Ver this link.

Mientras tanto, puede personalizar manualmente sus niveles con CSS. Intenté usar estilos en su muestra, pero por alguna razón no lo hacen correctamente, así que por lo menos el siguiente trabajo:

<select name="select_projects" id="select_projects"> 
 
     <option value="">project.xml</option> 
 
     <optgroup label="client1"> 
 
      <option value="">project2.xml</option> 
 
     </optgroup> 
 
     <optgroup label="client2"> 
 
      <option value="">project5.xml</option> 
 
      <option value="">project6.xml</option> 
 
      <optgroup label="client2_a"> 
 
       <option value="" style="margin-left:23px;">project7.xml</option> 
 
       <option value="" style="margin-left:23px;">project8.xml</option> 
 
      </optgroup> 
 
      <option value="">project3.xml</option> 
 
      <option value="">project4.xml</option> 
 
     </optgroup> 
 
     <option value="">project0.xml</option> 
 
     <option value="">project1.xml</option> 
 
    </select>

Espero que ayude.

Fuente

2011-04-22 01:39:50 eliel

Completamente inútil! Ok, la especificación es ... no tú. Gracias por señalarlo, sí, creo que daré salida a muchos grupos de optg de nivel único y les daré sangrías dinámicamente organizadas. – danjah

Me alejé de Select eventualmente. Las listas son mucho más maleables :) – danjah

Esto no funciona en absoluto. Intentó en GC30 e IE10. – user323094

Es increíblemente simple que el estilo. La respuesta me llegó después de horas de lucha :)). Las etiquetas optgroup y option están definiendo cadenas en modo de solo lectura, actualmente. Por lo tanto, para que usted pueda sangrar cualquiera de los contenidos opcionales u opcionales, simplemente use un espacio simple en los nombres o &nbsp.

Es así de simple :)!

Fuente

2012-02-27 18:34:47 lucian

No sé por qué votaría, eso es cojo. este es un truco muy inteligente que, de hecho, funciona. ¡felicitaciones a usted! – viggity

@viggity: ... y rompe la usabilidad. –

@ SébastienRenauld: Cuando la vida te da limonada ... maldices al W3C. – sergserg

Como una adición a la respuesta de lucian, las versiones más nuevas de Chrome no parecen admitir tener   incrustado en el texto. De hecho, mostrará el ampersand, etc., en lugar de darle el espacio sin interrupciones. Sin embargo, descubrí que usar el unicode version del espacio sin interrupciones seguirá funcionando bien.

Estoy usando Scala, así que pude simplemente tener "\u00A0" en mi código del lado del servidor. Probablemente puedas pegar el carácter Unicode directamente en tu código pero no lo recomendaría (solo porque sería muy difícil decir que no es un espacio normal).

Una cosa buena es que Chrome al menos ignorará los espacios en términos de navegación por el teclado. Si tengo una opción llamada Test, escribir t aún moverá el resaltado a la derecha, sin importar cuántos espacios sin ruptura lo antependen.

Fuente

2014-05-20 15:06:35 ShawnFumo

-1

Añadir a la css esto:

option { 
text-indent: 10px; 
}

Done.

Fuente

2016-04-29 15:51:07 FollaPijas

¿Cómo se sangran varios niveles de seleccionar grupo de opciones con CSS?

Respuesta

Cuestiones relacionadas