设置HTML5输入类型编号的样式

我正在用HTML5写一个表单。其中一个输入是

type=number

。我希望输入仅显示2位数字，但它似乎默认显示至少5位数字，这会占用额外的空间。我尝试添加

size=“2”

属性，但没有效果

这是我正在使用的标签：

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

---

我缺少什么？

只有4个特定的属性：

value-value是首次加载页面时输入框的默认值。无论使用哪种类型，这都是元素的公共属性

min-显然，是您所选择的数字的最小值。我应该为我的演示指定最小值为0，因为负数对于一周观看的电影数量没有意义

max-很明显，这表示输入的数字中的最大数字

步长-步长比例因子，如果未指定此属性，则默认值为1

---

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

不幸的是，在HTML5中，“模式”属性只链接到4-5个属性。不过，如果您愿意使用“文本”字段，并在以后转换为数字，这可能会对您有所帮助

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

CSS基本上允许“竖起大拇指”或“向下”确认

---

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

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

有一种方法：

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

---

我一直在寻找相同的解决方案，这对我来说很有效……添加一个内联css标记来控制输入的宽度

例如：

结合最小和最大属性，您可以控制输入的宽度。

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

您还可以用

样式

属性替换

大小

属性：

---

好的，所以，目前没有办法将数字输入框的宽度设置得更小。这太令人沮丧了。我搜索了很长时间才找到你的答案。数字状态有一个“max”属性，只需将其设置为999即可instead@Dane，您的脚本无法运行。绿色的大拇指没有显示出来。抱歉@Dane，这根本不起作用。此外，除了解析之外，文本和数字输入之间还有其他区别。我使用正确输入类型的主要原因是为了让虚拟键盘（电话）显示相关的按键。请编辑您的答案，并解释这解决问题的原因。为了澄清，

size

对于HTML5仍然存在，但它只对以下类型有效：文本、搜索、电话、url、电子邮件和有意义的密码

size

指的是文本的长度，所以它只适用于字符串。这并不能完全回答这个问题，至少对于我尝试过的内容来说不是。我使用chrome，windows 10此解决方案的问题是，这可能会限制应该显示的数字的可见性，因为输入数字框的部分宽度是其中包含的上下箭头。我喜欢此解决方案（或类似于

style=“max width:3em；”“

）与其他备选方案相比，至少宽度与正在使用的字体大小相关。如果存在max属性且没有宽度，则输入应将其大小调整为max值。至少谷歌浏览器就是这样。

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

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