如何使select元素在fieldset中缩小到max-width percent样式

Question

当我减小浏览器窗口的宽度时,尽管有以下命令,但select内部元素的fieldset大小不会减小max-width:

<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元素之外完美地起作用.如何使select元素缩小到max-width字段集中的(百分比)？

注意:我测试了Firefox 12.0和Google Chrome.我现在确定这是一个跨浏览器的问题.

澄清:请参考这个例子并注意一个select元素在a内部fieldset和另一个元素外部的行为之间的区别fieldset.我想要实现的是,其中的select元素fieldset表现得像fieldset元素之外的元素.

Answer 1

问题

这是不可能的,至少如果你只使用max-width(见下面的解决方案).对于样式来说,它们<select>总是有点棘手,因为它们是交互式内容元素 和表单控件元素.因此,他们必须遵循一些隐含的规则.例如,使用时,您不能选择宽于其中一个选项的选项max-width.考虑以下情况:

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

让我们说你要挤压它<select>- 会发生什么？选择的宽度会变小,直到......

+------------------------------------+-+   +-----------------------------------+-+
|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没有一些令人讨厌的怪癖,你不能设置样式或至少只有一点(颜色,字体变体).但是,如果正确准备了选择,则可以更改边框:

解决方案

使用上的width值select.是的,这很容易:

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

为什么这样做？由于option意志都承认width的select正确,并不会迫使select有一个隐含的min-width.请注意,这width是荒谬的,因为它不仅仅是max-width.max-width在这种情况下,大多数浏览器都不会关心和使用它,因为它提供了一个上限.

JSFiddle演示(适用于FF12,Chrome 18,IE9,Opera 11.60)

编辑

基于包装器的解决方案,这不会改变原始宽度:

<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演示(适用于上面列出的浏览器)