如何使选择元素在字段集中缩小为最大宽度百分比样式

一尘不染

如何使选择元素在字段集中缩小为最大宽度百分比样式

css

当我减小浏览器窗口的宽度时，尽管执行以下命令，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。我现在确定这是一个跨浏览器的问题。

说明性
：请参考此示例，并注意a中一个select元素fieldset与a中另一个元素的行为之间的区别fieldset。我要实现的是使select元素内部的fieldset行为类似于fieldset元素外部的行为。

阅读 268

2020-05-16

共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>不再适合。请记住，您无法样式化<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在这种情况下，大多数浏览器都不会在意并使用，因为它提供了上限。

（适用于FF12，Chrome 18，IE9，Opera11.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>

（在上面列出的浏览器中有效）

2020-05-16