How to make select elements shrink to max-width percent style within fieldset

问题:

When I reduce the width of my browser window, select elements within the fieldset does not reduce in size despite the max-width command:

South Georgia and the South Sandwich Islands

However, this works perfectly outside fieldset element. How do I make the select elements shrink to the max-width (percentage) within the fieldset?

Note: I have tested both Firefox 12.0 and Google Chrome. I am now sure that it is a cross-browser problem.

Clarification: Please refer to this example and note the difference between the behaviour of a select element inside a fieldset and another outside the fieldset. What I want to achieve is for the select element within the fieldset to behave like the one outside the fieldset element.

回答1:

The problem

This isn't possible, at least if you only use max-width (see below for solution). s are always a little bit tricky to style, as they're interactive content elements and form control elements. As such, they have to follow some implicit rules. For one, you cannot make a select less wide than one of its options when using max-width. Think of the following scenario:

 +------------------------------------+-+ |Another entry                       |v| +------------------------------------+-+ |Another entry                         | |Select box, select anything, please   | |Another entry                         | |Another entry                         | +------------------------------------+-+ 

Let's say that you want to squeeze this - what will happen? The select's width will get lesser, until...

 +------------------------------------+-+   +-----------------------------------+-+ |Another entry                       |v|   |Another entry                      |v| +------------------------------------+-+   +-----------------------------------+-+ |Another entry                         |   |Another entry                        |  |Select box, select anything, please   |-->|Select box, select anything, please  |  |Another entry                         |   |Another entry                        |  |Another entry                         |   |Another entry                        |  +------------------------------------+-+   +-----------------------------------+-+                                                     |            +---------------------------------------+            v +----------------------------------+-+   +---------------------------------+-+ |Another entry                     |v|   |Another entry                    |v| +----------------------------------+-+   +---------------------------------+-+ |Another entry                       |   |Another entry                      |  |Select box, select anything, please |-->|Select box, select anything, please|  |Another entry                       |   |Another entry                      |  |Another entry                       |   |Another entry                      |  +----------------------------------+-+   +---------------------------------+-+  

And then the process will stop, as the s wouldn't fit anymore. Keep in mind that you can't style s or at least only a little bit (color, font-variant) without getting some nasty quirks. However, the border-box can be changed, if the select is prepared correctly:

The solution

Use a width value on the select. Yep, it's easy as that:

South Georgia and the South Sandwich Islands

Why does this work? Because the option will now recognize the width of the select correctly and won't force the select to have a implicit min-width. Notice that the width is absurd, as it is more than the max-width. Most browsers won't care and use the max-width in this case, as it provides an upper bound.

JSFiddle Demo (works in FF12, Chrome 18, IE9, Opera 11.60)

Edit

Wrapper based solution, this won't change the original width:

   South Georgia and the South Sandwich Islands
 

JSFiddle Demo (works in browsers listed above)

回答2:

Is this what you’re looking for?

South Georgia and the South Sandwich Islands

width in percentages and give the min-width as an absolute value. The percentage is taken from its parent element. So, you should give a percentage to its parent too.

I hope this helps.

回答3:

Set the width of the fieldset to 100% (or any other value)

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

Tested in Google Chrome.

回答4:

try:

fieldset select{     margin:auto }

文章来源: How to make select elements shrink to max-width percent style within fieldset