如何使选择元素缩小到字段集中的最大宽度百分比样式 [英] How to make select elements shrink to max-width percent style within fieldset

问题描述

当我缩小浏览器窗口的宽度时， fieldset 中的元素不会减小尺寸 max-width 命令：

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>

然而，这在 fieldset 元素。如何使选择元素缩小到字段集中的 max-width （百分比）？

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

注意：我已测试过Firefox 12.0和Google Chrome。我现在确定这是一个跨浏览器问题。

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

澄清：请参阅此示例，并注意字段集中选择元素的行为之间的差异，另一个在字段集之外。我想要实现的是字段集中的 select 元素的行为类似于 fieldset 元素。

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.

推荐答案

问题

这是不可能的，至少如果你只使用 max-width （见下面的解决方案）。 < select> 总是风格有点棘手 ，因为它们是互动内容元素 和形成控制元素。因此，他们必须遵循一些隐含的规则。例如，使用 max-width 时，不能使选择宽度小于其选项的宽度。考虑以下情况：

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                         |
+------------------------------------+-+

假设你想挤压这个< select> - 会发生什么？选择的宽度会变小，直到...

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                      | 
+----------------------------------+-+   +---------------------------------+-+ 

然后进程会停止，因为< option> s不再适合了。请记住，你不能在没有得到一些令人讨厌的怪癖的情况下，样式< option> s 或至少只有一点（颜色，字体变体）。但是，如果选择准备正确，边框可以更改：

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:

选择上的 width 值。是的，很容易：

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>

为什么这样工作？因为选项现在将识别选择的 width 并且不会强制选择具有隐式 min-width 。注意， width 是荒谬的，因为它大于 max-width 。大多数浏览器在这种情况下不会关心和使用 max-width ，因为它提供了上限。

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演示 （适用于FF12，Chrome 18，IE9，Opera 11.60）

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

基于包装的解决方案，这不会更改原始宽度：

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 （适用于上面列出的浏览器）

JSFiddle Demo (works in browsers listed above)

这篇关于如何使选择元素缩小到字段集中的最大宽度百分比样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！