Question

我在页面上有一个输入字段，如下所示：

<input type="text" size="20" name="whatever" />

想象一下，我想保留size属性而不是使用CSS，而我现在想要将相同的框添加到相同宽度的相同形式：

<select name="whatever2">
  <option>an option</option>
</select>

我应该添加什么属性才能使选择框与输入字段的宽度相匹配？

我最初认为'尺寸'但没有 - 这是显示的选项数量，第二个想法是'style =“width：20em”'但它更大......

Answer 1

来自spec：

size = cdata [CN]

此属性告诉用户代理控件的初始宽度。宽度以像素给出，除非type属性具有值“text”或“password”。在这种情况下，它的值是指（整数）个字符数。

因此，文本和密码字段的size表示字符数 - 它不用于定义像素宽度。根据用于设置输入字段样式的字体，字段的像素宽度可能不同。

对于此字段：

<input type="text" size="25" name="firstname">

默认情况下，浏览器会将其渲染到足以容纳25个字符。

现在，你可以理论上使用上面的信息来确定在CSS中给它的width是什么，但我自己还没有打扰过它。此外，正如经常提到的，表单元素在页面上的呈现方式因浏览器而异，因此它可能不是调整字段大小的可靠方法。

请注意，使用CSS设置width始终会覆盖size属性。

Answer 2

仅使用CSS，您无法执行此操作，因为大小不会描述屏幕上的大小，而是适合的字符大小。

也许你想为此使用JavaScript，jQuery它看起来像这样：

$('#idOfTheSelect').css('width', $('#idOfTheInput').width());

如果你想让它们与纯CSS具有相同的宽度，你可以将两者都设置为例如width: 20em。

Answer 3

使用大小不如使用css那么精确。如果您不支持不能使用css的浏览器，请同时使用size和css width。

Answer 4

对于您编写width=20的输入类型，但是将选择框设置为width:20em。您应该对两者使用相同的指标，因此要么是20em，要么只是20，并让浏览器引擎设置默认指标。

Answer 5

size属性基于字体大小，因此您必须为文本框设置相同的字体设置，并为要对应的值设置下拉列表。

但是，元素对边框和填充有不同的设置，并且下拉列表中通常还有一些额外的控制（即扩展箭头）需要更多的空间。

使不同的表单元素具有相同的大小非常棘手，因为不同的浏览器具有不同的默认设置并以不同的方式显示元素。即使是相同的浏览器也会因操作系统中的可视设置而异。如果没有大量的工作测试不同的设置，你根本无法获得一致的结果。