Question

我有几个不同长度的数字输入，我想要设置样式，使输入框不超过必要的时间：

<input type=number name=short value='1' min=0 max=9 size=1 maxlength=1>
<input type=number name=medium value='123' min=0 max=999 size=3 maxlength=3>
<input type=number name=long value='12345' min=0 max=99999 size=5 maxlength=5>

Firefox无法识别number类型输入，并会假设它们是text框来处理输入。因此，size和maxlength将应用于输入框。

Chrome会识别number类型输入，并会根据max值加上旋转宽度（向上/向下）按钮自动限制输入框的大小。

然而，同样识别number类型输入的Opera也会以不同的方式做事。它使用size值来计算输入框的大小，如果没有提供，则使用浏览器默认值。它没有考虑旋转按钮的宽度，导致部分输入被遮挡。

有没有办法正确设置数字输入的样式，使它们不超过必要的时间，并考虑到我在Opera浏览器中提到的问题？

Answer 1

在没有令人讨厌的黑客攻击的情况下，你可以做的最好的事情就是按1增加你的输入大小：

<input type=number name=short value='1' min=0 max=9 size=2 maxlength=1>
<input type=number name=medium value='123' min=0 max=999 size=4 maxlength=3>
<input type=number name=long value='12345' min=0 max=99999 size=6 maxlength=5>

它不会对FF和Webkit产生很大的影响，但会在Opera中正确显示

更新或者您可以使用CSS hack仅定位歌剧 - http://jsfiddle.net/KmHwG/4/

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    input[name=short]  { width: 24px }
    input[name=medium] { width: 38px } 
    input[name=long]   { width: 52px } 
}

Answer 2

我认为这可能是另一种解决方案：

noindex:-o-prefocus, input[type=number] {
 padding-right: 1.5em;
}

输入类型编号的跨浏览器样式，使得它们不长于必要的

2 个答案: