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

Posted 2023-03-06

【中文标题】如何使选择元素缩小到字段集中的最大宽度百分比样式

【英文标题】：How to make select elements shrink to max-width percent style within fieldset

【发布时间】：2012-05-27 04:56:36

【问题描述】：

当我减小浏览器窗口的宽度时，fieldset 中的 select 元素的大小并没有减小，尽管使用了 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。我现在确定这是一个跨浏览器的问题。

澄清：请参阅this example 并注意select 元素在fieldset 内部的行为与fieldset 外部的另一个行为之间的区别。我想要实现的是fieldset 中的select 元素的行为类似于fieldset 元素之外的元素。

【问题讨论】：

在 Chrome jsfiddle.net/waitinforatrain/J5j39/2 上为我工作。这在 Firefox 上不适合您吗？

@waitinfratrain：不，当我缩小浏览器窗口时它根本没有缩小。

据我所知，没有人报告过 Firefox 错误，所以我做了：bugzilla.mozilla.org/show_bug.cgi?id=823483 希望这不是重复的。我还没有报告相应的 Chrome/Webkit 错误。可能是其他人想要/

【参考方案1】：

包装选择。在本例中，我将使用带有“select_wrap”的 div。

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

“绝对”上下文允许解释最大宽度 - 没有实际的位置信息，只是将其强制到不同的上下文中。 calc() 让您更详细地了解 max-width 实际应该是什么，因为您没有以前的边距和填充。 text-overflow 看起来不错。

需要 select_wrap 的高度以确保表单按预期围绕选择流动 - 您需要保留选择之前填充的空间。

【参考方案2】：

尝试：

fieldset select
    margin:auto

【讨论】：

请说明您的答案是如何解决问题的，它将帮助大家更清楚地理解您的解决方案，以供将来参考。

【参考方案3】：

问题

这是不可能的，至少如果您只使用max-width（请参阅下面的解决方案）。 <select>s 始终是little bit tricky to style，因为它们是interactive content elements 和 表单控制元素。因此，他们必须遵循一些隐含的规则。一方面，当使用max-width 时，您不能使选择的宽度小于其选项之一。考虑以下场景：

+------------------------------------------------+-+ |另一个条目 |v| +------------------------------------------------+-+ |另一个条目 | |请选择框，请选择任何内容 | |另一个条目 | |另一个条目 | +------------------------------------------------+-+

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

+------------------------------------------------+-+ +---------- --------------------------+-+ |另一个条目 |v| |另一个条目 |v| +------------------------------------------------+-+ +---------- --------------------------+-+ |另一个条目 | |另一个条目 | |请选择框，请选择任何内容|-->|请选择框，请选择任何内容| |另一个条目 | |另一个条目 | |另一个条目 | |另一个条目 | +------------------------------------------------+-+ +---------- --------------------------+-+ | +----------------------------------------------------+ v +---------------------------------+-+ +---------- ----------------------+-+ |另一个条目 |v| |另一个条目 |v| +---------------------------------+-+ +---------- ----------------------+-+ |另一个条目 | |另一个条目 | |请选择框，请选择任何内容|-->|请选择框，请选择任何内容| |另一个条目 | |另一个条目 | |另一个条目 | |另一个条目 | +---------------------------------+-+ +---------- ----------------------+-+

然后该过程将停止，因为 <option>s 不再适合。请记住，如果没有一些讨厌的怪癖，您将无法设置<option>s 的样式，或者至少只有一点点（颜色、字体变体）。但是，如果选择准备正确，可以更改边框框：

解决办法

在select 上使用width 值。是的，就这么简单：

<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 现在可以正确识别select 的width，并且不会强制select 具有隐式min-width。请注意width 是荒谬的，因为它比max-width 更多。在这种情况下，大多数浏览器不会关心并使用max-width，因为它提供了一个上限。

JSFiddle Demo（适用于 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 Demo（适用于上述浏览器）

【讨论】：

感谢您的尝试。如果我的问题不够清楚，我深表歉意。我在问题中添加了一些说明和示例。请看一看。您提出的解决方案会导致 select 元素扩展到超出必要的范围。

我认为没有简单的方法可以做到这一点。您可以使用较小的width（45ex 之类的就足够了）。 <select>s 的风格总是很痛苦......但是，我可能有一个想法。 edit 更新了我的帖子。您需要使用额外的包装器。

太好了！这就是我要的。我还邀请了另外两个用户来帮助我解决这个问题，除非他们能提出更好的解决方案，否则赏金将属于你。谢谢你的时间:)

感谢您的见解...但是，为什么它在

@iamkeir Apparently fieldsets 具有为兼容性而保留的旧版大小调整行为。在 Chrome 中，这是使用默认样式 min-width: min-content 实现的，而在 Firefox 中，这是硬编码到渲染引擎中的。

【参考方案4】：

this 是你要找的吗？

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

无论哪种方式，当您使用一个值（例如 300 像素）指定宽度时，此高度将优先，并且元素本身将被分配 300 像素。以百分比定义width，并将min-width 作为绝对值。百分比取自其父元素。所以，你也应该给它的父母一个百分比。

我希望这会有所帮助。

【讨论】：

不，这不是我想要的。我使用的是最大宽度，而不是最小宽度，90%，这样输入元素仍然可以适合智能手机浏览器。

【参考方案5】：

将fieldset 的width 设置为100%（或任何其他值）

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

在谷歌浏览器中测试。

【讨论】：

刚刚在 Firefox 中测试过，并不能解决那里的问题，但在 Chrome 中确实有效。