HTML5输入类型数字的样式化

Question

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

这是我正在使用的标记：

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

我漏掉了什么？

- Michael Lewis

---

如果存在max属性且没有宽度，输入框应该调整其大小以适应最大值。至少在Google Chrome中是这样的情况。 - GDY

Answer 1

HTML5数字输入框不具备像宽度或大小这样的样式属性，但你可以使用CSS轻松地为其添加样式。

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

- zak_mckraken

---

澄清一下，size 对于 HTML5 仍然存在，但它只对以下类型有效：文本、搜索、电话、网址、电子邮件和密码。 http://www.w3schools.com/tags/att_input_size.asp - hamx0r

这是有道理的。size指的是文本的长度，因此它只适用于字符串。 - Stijn de Witt

Answer 2

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

例如：

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

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

- jmiller

---

这个解决方案的问题在于，由于输入数字框的宽度部分包含其中的上下箭头，因此可能会剪切应显示的数字的可见性。 - user2230470

我喜欢这个解决方案（或类似于 style="max-width: 3em;" 的东西）相比其他选择 - 至少宽度是相对于所使用的字体大小的。 - ericpeters

Answer 3

很遗憾，在HTML 5中，“pattern”属性仅与4-5个属性相关联。但是，如果您愿意改用“文本”字段并稍后转换为数字，则可能会对您有所帮助；

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

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

CSS基本上允许使用“赞”或“踩”进行确认。

示例1

示例2

- Dane Balia

---

这真是令人沮丧。我花了很长时间才找到你的答案。 - DOK

数字状态有一个“max”属性，只需将其设置为999即可。 - dsas

@Dane，你的脚本没有起作用。绿色的大拇指没有显示出来。 - Pacerier

抱歉 @Dane，这根本不起作用。此外，文本输入和数字输入之间还有其他差异，而不仅仅是解析。我使用正确类型的输入的主要原因是为了虚拟键盘（手机）显示相关键。 - Oded Niv

"pattern" 属性仅在提交时执行验证，但无法防止我插入无效字符。 - xtian

Answer 4

只有4个特定的属性：

1. value - 当页面首次加载时，该值是输入框的默认值。无论使用哪种类型的元素，这都是一个常见的属性。
2. min - 显然，这是数字的最小值。我应该在我的演示中将最小值指定为0，因为一个负数对于一周内观看电影的数量来说是没有意义的。
3. max - 显然，这代表数字输入的最大值。
4. step - 步进比例因子，默认值为1，如果未指定此属性，则为默认值。

所以你不能通过关键字控制用户输入的长度。但浏览器的实现可能会改变。

- Danil Speransky

---

好的，目前没有办法将数字输入框的宽度样式设置得更窄。 - Michael Lewis

Answer 5

此外，您可以通过使用 style 属性来替换 size 属性：
<input type="number" name="numericInput" style="width: 50px;" min="0" max="18" value="0" />

- Yuanga

Answer 6

有一种方法：

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

- Jules

---

这并没有完全回答问题，至少对于我尝试的情况不是。我使用Chrome，Windows 10。 - Akhil Gupta

Answer 7

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

- Juan Carlos De Luna

---

请编辑您的回答，并解释为什么这可以解决问题。 请修改您的答案，并说明为什么这样做可以解决问题。 - Ben