Cómo hacer que los elementos seleccionados se reduzcan al estilo de porcentaje de ancho máximo dentro de fieldset

Cuando reduzco el ancho de la ventana de mi navegador, select elementos select dentro del fieldset no se reducen en tamaño a pesar del comando de max-width :

 
South Georgia and the South Sandwich Islands

Sin embargo, esto funciona perfectamente fuera del elemento fieldset . ¿Cómo puedo hacer que los elementos select reduzcan al max-width (porcentaje) dentro del fieldset?

Nota: He probado Firefox 12.0 y Google Chrome. Ahora estoy seguro de que es un problema entre navegadores.

Aclaración : consulte este ejemplo y observe la diferencia entre el comportamiento de un elemento de select dentro de un conjunto de fieldset y otro fuera del conjunto de fieldset . Lo que quiero lograr es que el elemento select dentro del fieldset comporte como el que está fuera del elemento fieldset .

El problema

Esto no es posible, al menos si solo usa max-width (consulte la solución a continuación). s siempre son un poco difíciles de diseñar , ya que son elementos de contenido interactivo y elementos de control de formularios. Como tal, tienen que seguir algunas reglas implícitas. Por un lado, no puede seleccionar menos que una de sus opciones cuando usa max-width . Piensa en la siguiente situación:

 + ------------------------------------ + - +
 | Otra entrada | v |
 + ------------------------------------ + - +
 | Otra entrada |
 | Seleccione el cuadro, seleccione cualquier cosa, por favor |
 | Otra entrada |
 | Otra entrada |
 + ------------------------------------ + - +

Digamos que quieres exprimir este – ¿qué pasará? El ancho de la selección será menor, hasta que …

 + ------------------------------------ + - + + --------- -------------------------- + - +
 | Otra entrada | v |  | Otra entrada | v |
 + ------------------------------------ + - + + --------- -------------------------- + - +
 | Otra entrada |  | Otra entrada | 
 | Seleccione el cuadro, seleccione cualquier cosa, por favor | -> | Seleccione el cuadro, seleccione cualquier cosa, por favor | 
 | Otra entrada |  | Otra entrada | 
 | Otra entrada |  | Otra entrada | 
 + ------------------------------------ + - + + --------- -------------------------- + - + 
                                                    |
            + --------------------------------------- +
            v
 + ---------------------------------- + - + + ----------- ---------------------- + - +
 | Otra entrada | v |  | Otra entrada | v |
 + ---------------------------------- + - + + ----------- ---------------------- + - +
 | Otra entrada |  | Otra entrada | 
 | Seleccione el cuadro, seleccione cualquier cosa, por favor | -> | Seleccione el cuadro, seleccione cualquier cosa, por favor | 
 | Otra entrada |  | Otra entrada | 
 | Otra entrada |  | Otra entrada | 
 + ---------------------------------- + - + + ----------- ---------------------- + - + 

Y luego el proceso se detendrá, ya que las ya no cabrían. Tenga en cuenta que no puede modificar o al menos solo un poco (color, variante de fuente) sin tener algunas peculiaridades desagradables. Sin embargo, el cuadro de borde se puede cambiar, si la selección se prepara correctamente:

La solución

Use un valor de width en la select . Sí, es fácil como eso:

 

¿Por qué funciona esto? Porque la option ahora reconocerá el width de la select correctamente y no forzará a la select a tener un min-width implícito. Tenga en cuenta que el width es absurdo, ya que es más que el max-width . A la mayoría de los navegadores no les importará y utilizará el max-width en este caso, ya que proporciona un límite superior.

Demostración JSFiddle (funciona en FF12, Chrome 18, IE9, Opera 11.60)

Editar

Solución basada en Wrapper, esto no cambiará el ancho original:

 

Demostración de JSFiddle (funciona en los navegadores listados arriba)

Es esto lo que estás buscando?

 

De cualquier manera, cuando especifique el ancho con un valor (como 300px): esta altura tendrá prioridad y al elemento se le asignará 300 px. Defina el width en porcentajes y dé el min-width como un valor absoluto. El porcentaje se toma de su elemento padre. Por lo tanto, debe dar un porcentaje a su padre también.

Espero que esto ayude.

Establezca el width del fieldset en 100% (o cualquier otro valor)

http://jsfiddle.net/e2H82/3/

Probado en Google Chrome.

tratar:

 fieldset select{ margin:auto } 

Ajustar el seleccionar. Para este ejemplo, usaré un div con “select_wrap”.

 div.select_wrap { height: 1em; } div.select_wrap select { position: absolute; max-width: calc(100% - 6px); text-overflow: ellipsis; } 

El contexto “absoluto” permite que se interprete el ancho máximo, sin información de posición real, simplemente forzándolo a un contexto diferente. calc () te permite ser un poco más detallado con el ancho máximo que realmente debería ser, dado que no tienes márgenes y relleno donde estaban anteriormente. el desbordamiento de texto se ve bien.

La altura de select_wrap es necesaria para asegurarse de que el formulario fluya alrededor de la selección como se esperaba; debe reservar el espacio que anteriormente seleccionó.