当在 Chrome 中向输入数字字段添加最大值时，它将根据最大值的宽度重新调整字段的大小。
看来我无法控制调整大小的行为。
<input type="number" name="" value="3500" placeholder="3500" min="500">
<br>
<input type="number" name="" value="3500" placeholder="3500" min="500" max="100000">
<br>
<input type="number" name="" value="3500" placeholder="3500" min="500" max="100000000">
问题：如何使其表现得像没有 max 属性或普通文本字段一样。
PS：切换类型时我看不到样式有任何变化。
PPS：我必须说我已经尝试过使用-webkit-appearance: textfield;但 Chrome 已经在使用textfield默认情况下。
百分比和div的解决方案
虽然这个问题发布已经快六年了，但就在几分钟前，我发现自己处于与OP相同的情况。解决方案是添加一个 div 作为输入字段的容器。然后，对于输入的宽度，我们添加填充所有可用空间的规则，此时我们可以根据需要更改 div 包装器的大小。
前两个输入显示没有 div 时发生的情况。尽管“最大值”不同，但最后两个输入具有相同的大小。
p{margin-bottom: 0;}
.wrapped{
width: -moz-available;
width: -webkit-fill-available;
width: fill-available;
}
.inputWrapper{width: 30%;}
<p>Min 0, max 10</p>
<input type="number" min="0" max="10">
<p>Min 0, max 1000000</p>
<input type="number" min="0" max="1000000">
<div class="inputWrapper">
<p>Wrapped: min 0, max 10</p>
<input class="wrapped" type="number" min="0" max="10">
<p>Wrapped: min 0, max 1000000</p>
<input class="wrapped" type="number" min="0" max="1000000">
</div>
关于输入字段自动调整大小
老实说，我没有阅读文档中关于此自动调整大小的说明，当我注意到这种意外和不良行为时，我感到很惊讶。从下面的简单测试中我们可以看到，仅当设置了“min”和“max”值时才会发生调整大小：调整大小似乎仅与 max-0 之间的距离而不是 max-min 之间的距离成比例。请注意，这是没有建议的解决方案的默认行为。
p{margin-bottom:0;}
<p>Min 0</p>
<input type="number" min="0">
<p>Min 100</p>
<input type="number" min="100">
<p>Max 0</p>
<input type="number" max="0">
<p>Max 100</p>
<input type="number" max="100">
<p> The previous input fields have the same width<p>
<p>Min 0, max 10</p>
<input type="number" min="0" max="10">
<p>Min 0, max 100</p>
<input type="number" min="0" max="100">
<p>Min 99, max 100</p>
<input type="number" min="99" max="100">
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
