为什么 HTML 中“<input>”标签中的“size”属性仅适用于 TEXT 而不适用于 NUMBER？答案

【问题标题】：Why is that the "size" attribute in a "<input>" tag in HTML only applies to TEXT and not NUMBER?为什么 HTML 中“<input>”标签中的“size”属性仅适用于 TEXT 而不适用于 NUMBER？
【发布时间】：2016-01-26 00:15:14
【问题描述】：

如果我有一个带有标签<input type="text" size="3" …>的 HTML 文件，它会做它应该做的事情，它会呈现一个宽度为 3 个字符的输入元素。另一方面，如果我有标签 <input type="number" size="3" …> 它会呈现输入字段的默认宽度（比 3 个字符长得多）。

我知道我可以使用.myclass { width: 75px; } 创建一个自定义类，但我认为使用 size 属性会容易得多，特别是如果我知道对于数字字段接受的数字将从 0 到 100，为什么要使用更宽的输入字段？

这是设计好的吗？我需要为此使用 CSS 吗？如果是这样，我如何根据我在表单中使用的字体系列/大小来呈现正好三个字符宽的输入字段？

【问题讨论】：

尝试 min='1' max='100' maxlength='3' 并添加一个类，然后用 css 限制宽度

标签： html css

【解决方案1】：

Size 不是输入类型=数字的属性，它具有 min 和 max 属性来指定最小和最大数字。要调整宽度，您必须使用宽度样式。

【讨论】：

是的。奇怪的是，Chrome 似乎正确地呈现了 input=number 上的 size 属性，但 Firefox 没有。一般来说，最好用 CSS 控制元素的大小。

【解决方案2】：

我刚刚测试了以下内容：

<input type="number" size="20" min="1" max="5"/>

size 属性在 Chrome 或 FireFox 上没有响应，但令人惊讶的是它在 Internet Explorer 11 上确实有效。

我的猜测是它仍在接收全局兼容性的过程中，我建议创建一个 css 类来处理你想要的宽度。

Here is a fiddle的代码用于测试目的。

【讨论】：

【解决方案3】：

<input type="number" min="1" max="5">

这就是你要找的吗？除此之外，我还没有找到任何可以调整输入大小的东西。我认为最好的办法是在您的 css 文件中使用 css 或将 style="" 添加到输入字段。

【讨论】：

他还希望大小限制为 3。我已经用正确的语法回答了。
如果你没看错，他还说 size="3" 不起作用。

【解决方案4】：

这似乎对我有用。

<input type="number" size="3" max=1 min=5>

编辑。需要添加最小和最大尺寸才能工作。

【讨论】：

不适合我，即使我将最大值和最小值更改为正确的值。