样式化 HTML5 输入类型编号答案

【问题标题】：Styling HTML5 input type number样式化 HTML5 输入类型编号
【发布时间】：2012-08-17 11:33:51
【问题描述】：

我正在用 HTML5 编写一个表单。其中一个输入是type=number。我希望输入只显示 2 位数字，但它似乎默认显示至少 5 位数字，这会占用额外的空间。我试过添加size="2"属性，没有效果。

这是我正在使用的标签：

<input type="number" name="numericInput" size="2" min="0" max="18" value="0" />

我错过了什么？

【问题讨论】：

【解决方案1】：

HTML5 数字输入没有宽度或大小等样式属性，但您可以使用 CSS 轻松设置样式。

input[type="number"] {
   width:50px;
}

【讨论】：

澄清一下，size 对于 HTML5 仍然存在，但它只对以下类型有效：文本、搜索、电话、网址、电子邮件和密码 w3schools.com/tags/att_input_size.asp
这是有道理的。 size 指的是文本的长度，所以它只适用于字符串。

【解决方案2】：

我一直在寻找相同的解决方案，这对我有用...添加一个内联 css 标签来控制输入的宽度。

例如：

<input type="number" min="1" max="5" style="width: 2em;">

结合 min 和 max 属性可以控制输入的宽度。

【讨论】：

【解决方案3】：

不幸的是，在 HTML 5 中，'pattern' 属性只链接到 4-5 个属性。但是，如果您愿意改用“文本”字段并稍后转换为数字，这可能会对您有所帮助；

这将输入从 1 个字符（数字）限制为 3 个。

<input name=quantity type=text pattern='[0-9]{1,3}'>

CSS 基本上允许通过“竖起大拇指”或“向下”进行确认。

【讨论】：

【解决方案4】：

只有 4 个特定属性：

因此，您无法通过关键字控制用户类型的长度。但是浏览器的实现可能会改变。

【讨论】：

【解决方案5】：

您还可以将size 属性替换为style 属性：
<input type="number" name="numericInput" style="width: 50px;" min="0" max="18" value="0" />

【讨论】：

【解决方案6】：

有办法：

<input type="number" min="0" max="100" step="5"/>

【讨论】：

【解决方案7】：

<input type="number" name="numericInput" size="2" min="0" maxlength="2" value="0" />

【讨论】：