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

Posted 2023-03-06

【中文标题】输入类型编号的跨浏览器样式，使得它们不会超过必要的长度

【英文标题】：Cross-browser styling of input type number such that they are not longer than necessary

【发布时间】：2012-06-25 23:11:19

【问题描述】：

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

<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 浏览器中提到的问题，有没有办法正确设置数字输入的样式，使它们不会超过必要的长度？

【参考方案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  

【讨论】：

在我的情况下，旋转按钮的宽度为两位数。这是一个出奇的好和简单的解决方案。让我再等几分钟，看看还有没有其他人。谢谢！

这些名称：short、medium 和 long 只是示例。我有很多数字输入，因此这种替代方法不可行。顺便说一句，它是-o-，而不是歌剧的-webkit-。

我知道 -o-，但令人惊讶的是，这是 Opera 的 hack - ***.com/a/1280454/981134 我尝试了 -o-，但由于某些奇怪的原因它不起作用

哇，这是一个很棒的链接。谢谢！也许我可以用它来隐藏旋转按钮。可能吗？

【参考方案2】：

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

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