HTML输入数字填充

Question

创建一个简单的表单。

好奇为什么type='number'的默认大小与type='text'不同？

窗体看起来像这样。我相信所有默认设置。小提琴下面的链接。

<form>
  <label for='number' >Age:</label>
  <input id='number' type='number' placeholder='Enter your age'>
  <label for='name' >Name:</label>
  <input id='name' type='text' placeholder='Enter your name'/>
</form>

https://jsfiddle.net/fnbkjcd3/2/

Answer 1

简短的回答：就是这样。不同的浏览器可以并且将会以不同的方式实现不同的<input>类型-有时 VERY 的实现方式也不同：

Numeric Inputs – A Comparison of Browser Defaults

MDN: input The Input (Form Input) element

MDN: input type="number"

PS：

我用FF和Chrome浏览了您的JSFiddle，至少对我来说，文本输入看起来与数字输入相同。我不确定为什么会看到它们“不同”地呈现。

建议：

尝试在CSS中显式设置字体/大小，看看是否有区别。

Answer 2

如果您不知道，每个浏览器都有自己的默认user agent样式表，该样式表用于使未样式化的网站看起来更清晰。因此，字段大小可能因浏览器而异，请参见以下两个屏幕截图： Firefox： Chrome：

要在所有“用户代理”中应用标准样式表，可以使用cssrest。