html - 样式化 HTML5 输入类型编号

Question

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

这是我正在使用的标签：

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

我错过了什么？

score 59 · Accepted Answer

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

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

score 19 · Accepted Answer

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

例如：

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

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

score 11 · Accepted Answer

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

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

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

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

score 3 · Accepted Answer

只有 4 个特定属性：

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

score 1 · Accepted Answer

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

score -3 · Accepted Answer

-3

有一种方法：

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

于 2014-05-01T05:09:18.313 回答

score -5 · Accepted Answer

-5

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

于 2015-04-03T14:00:39.570 回答

7 回答 7