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

Question

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

<fieldset style="background:blue;"> <select name=countries style="max-width:90%;">  <option value=gs>South Georgia and the South Sandwich Islands</option> </select> </fieldset> 

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.

Answer 1

The problem

This isn't possible, at least if you only use max-width (see below for solution). <select>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 <select> - 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 <option>s wouldn't fit anymore. Keep in mind that you can't style <option>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:

<fieldset style="background:blue;">  <select name=countries style="width:100%;max-width:90%;">   <option value=gs>South Georgia and the South Sandwich Islands</option>  </select> </fieldset> 

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:

<fieldset style="background:blue;"> <div style="display:inline-block;max-width:90%;"> <!-- additional wrapper -->  <select name=countries style="width:100%">   <option value=gs>South Georgia and the South Sandwich Islands</option>  </select> </div> </fieldset> 

JSFiddle Demo (works in browsers listed above)