样式化HTML5输入类型编号

Question

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

这是我正在使用的标签：

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

我错过了什么？

Answer 1

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

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

Answer 2

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

例如：

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

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

Answer 3

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

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

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

CSS基本上允许使用"Thumbs up"或"Down"进行确认。

示例1

示例2

Answer 4

只有4个特定的：

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

所以你们不能通过关键字来控制用户类型的长度。但是浏览器的实现方式可能会改变。

Answer 5

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

Answer 6

有一种方法：

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

Answer 7

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