使用min和max时，数字输入的大小减半

Question

进行输入时，如下：

＆＃13;

＆＃13;

<input type="number" min="0" max="100"><br>
<input type="number" min="0" max="99"><br>
<input type="number" min="1" max="100"><br>
<input type="number" min="1" max="99"><br>

＆＃13;

＆＃13;

＆＃13;

它缩短了输入字段的宽度，特别是当max为100时。由于我从未见过这个，我只能猜测它是否会这样认为我将使用百分比或货币，我实际上是这样做的，但是我不想要这个。除了使用不同的值或自己改变输入的大小之外，还有其他方法可以防止这种情况发生吗？

Answer 1

这是某些 *浏览器呈现这些输入的默认行为。所以答案是否。如果你想拥有一定的宽度，请看看其他答案。

*不同的浏览器以不同的方式呈现元素：

这是Mozilla Firefox中代码段的结果：

Answer 2

输入字段宽度适应最高值的宽度：100。99少一个字符，因此输入字段更短。如果您的最大值具有不同的字符长度，我认为如果没有CSS，您不能阻止这种差异。

现在，CSS应该是小菜一碟......

<style>.medium-input {width:100px;}</style>
<input type="number" min="0" max="100"  class="medium-input"><br>
<input type="number" min="0" max="99"  class="medium-input"><br>
<input type="number" min="1" max="100"  class="medium-input"><br>
<input type="number" min="1" max="99"  class="medium-input"><br>

我在所有输入中添加了相同的类，因此如果您愿意，还可以定义其他一些长度。 您也可以使用input[type=number]作为选择器。

Answer 3

你可以添加css来控制输入的宽度。 这将完成这项工作：

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