Html 样式化 HTML5 输入类型编号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12066436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling HTML5 input type number
提问by Michael Lewis
I'm writing a form in HTML5. One of the inputs is type=number. I want the input to only show 2 digits but it seems to default to showing at least 5 digits, which takes up extra space. I've tried adding size="2"attribute, with no effect.
我正在用 HTML5 编写表单。输入之一是type=number。我希望输入只显示 2 位数字，但它似乎默认显示至少 5 位数字，这会占用额外的空间。我试过添加size="2"属性，没有效果。
This the tag i'm using:
这是我正在使用的标签：
<input type="number" name="numericInput" size="2" min="0" max="18" value="0" />
What am I missing?
我错过了什么？
回答by zak_mckraken
HTML5 number input doesn't have styles attributes like width or size, but you can style it easily with CSS.
HTML5 数字输入没有宽度或大小等样式属性，但您可以使用 CSS 轻松设置样式。
input[type="number"] {
width:50px;
}
回答by user3464091
I have been looking for the same solution and this worked for me...add an inline css tag to control the width of the input.
我一直在寻找相同的解决方案，这对我有用……添加一个内联 css 标签来控制输入的宽度。
For example:
例如：
<input type="number" min="1" max="5" style="width: 2em;">
Combined with the min and max attributes you can control the width of the input.
结合 min 和 max 属性，您可以控制输入的宽度。
回答by Dane Balia
Unfortunately in HTML 5 the 'pattern' attribute is linked to only 4-5 attributes. However if you are willing to use a "text" field instead and convert to number later, this might help you;
不幸的是，在 HTML 5 中，'pattern' 属性只链接到 4-5 个属性。但是，如果您愿意改用“文本”字段并稍后转换为数字，这可能会对您有所帮助；
This limits an input from 1 character (numberic) to 3.
这将输入限制为 1 个字符（数字）到 3 个。
<input name=quantity type=text pattern='[0-9]{1,3}'>
The CSS basically allows for confirmation with an "Thumbs up" or "Down".
CSS 基本上允许使用“竖起大拇指”或“向下”进行确认。
回答by Danil Speransky
There are only 4 specific atrributes:
只有 4 个特定属性：
- value - Value is the default value of the input box when a page is first loaded. This is a common attribute for element regardless which type you are using.
- min - Obviously, the minimum value you of the number. I should have specified minimum value to 0 for my demo up there as a negative number doesn't make sense for number of movie watched in a week.
- max - Apprently, this represents the biggest number of the number input.
- step - Step scale factor, default value is 1 if this attribute is not specified.
- value - 值是第一次加载页面时输入框的默认值。无论您使用哪种类型，这都是元素的通用属性。
- min - 显然，您的数字的最小值。我应该为我的演示指定最小值为 0，因为负数对于一周内观看的电影数量没有意义。
- max - 显然，这表示输入数字的最大数字。
- step - 步长比例因子，如果未指定此属性，则默认值为 1。
So you cannot control length of what user type by keyword. But the implementation of browsers may change.
因此，您无法通过关键字控制用户键入的长度。但是浏览器的实现可能会改变。
回答by Yuanga
Also you can replace sizeattribute by a styleattribute:<input type="number" name="numericInput" style="width: 50px;" min="0" max="18" value="0" />
您也可以用size属性替换style属性：<input type="number" name="numericInput" style="width: 50px;" min="0" max="18" value="0" />
回答by Jules
There is a way:
有一种方法：
<input type="number" min="0" max="100" step="5"/>
回答by Juan Carlos De Luna
<input type="number" name="numericInput" size="2" min="0" maxlength="2" value="0" />
