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)

Answer 2

Is this what you’re looking for?

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

  <input name=others style="display:block; min-width:300px; width:90%;">
</fieldset>

Either way, when you specify the width with a value (such as 300px) – this height will take priority and the element will be assigned 300px itself. Define the 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.

Answer 3

Wrap the select. For this example, I'll use a div with "select_wrap".

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

The "absolute" context allows max-width to be interpreted - no actual position information, just force it into a different context. calc() lets you be a bit more detailed with what max-width actually should be, given you don't have margins and padding where they were previously. text-overflow looks nice.

select_wrap's height is needed to make sure the form flows around the select as expected - you need to reserve the space the select formerly filled.

Answer 4

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

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

Tested in Google Chrome.

Answer 5

try:

fieldset select{
    margin:auto
}