在iPhone iOS / Safari上显示HTML输入类型编号的缺陷

Question

我想在移动应用程序上使用HTML输入类型=“数字”，以便向智能手机（Android，iPhone和其他一些人）表明，数字键盘对于用户来说比正常更有趣一。这很好用。

所以，我在这里有这篇HTML：

<h3>type="number"</h3>
<input type="number" class="input-number"/>
<h3>type="text"</h3>
<input type="text" class="input-text"/>

这里应用的重要CSS元素是：

input {
  height: 2em;
  padding: 0.2em 0.5em;
  width: 100%;

  /* avoid iPhone rounded corners */
  border: 1px solid #afb7c1;
  border-collapse: collapse;
  border-radius: 0 0 0 0;
}

.input-number {
  text-align: right;
}

哪个 应该像这样呈现：

以上是从iOS 4.1获取的截图，世界仍然可以。同样在Android手机上，一切正常。但是看看iOS 4.2,4.3上会发生什么：

突然之间，数字字段的宽度有点小，几乎就像iPhone想要为某些浏览器上输入的type =“number”时出现的无用微调器腾出空间。

有人知道这样的问题吗？你怎么修好它的？或者解决它？有没有其他方法可以让手机更喜欢数字键盘？或者是否有一些专有的CSS样式我可以申请撤消这个额外的右边距？

Answer 1

实际上提问者本人非常接近答案，因为他知道这是微调器的错误，幸运的是webkit允许用户通过CSS控制它：

input[type="number"]::-webkit-outer-spin-button { display: none; }

来源：REMOVE SPIN CONTROL ON INPUT TYPE=NUMBER IN WEBKIT

现场演示：http://jsbin.com/aviram/5/

希望有所帮助。

Answer 2

虽然vincicat的解决方案（之前已获得赏金）似乎最初起作用，但它揭示了Webkit浏览器中的另一个渲染缺陷。在10个页面刷新中的2个中，当输入<td>并使用width: 100%样式设置时，输入呈现零宽度...

这里找到了一个更好的解决方案（针对我的用例）：

Disable webkit's spin buttons on input type="number"?

它由以下CSS样式组成：

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

有趣的补充：我发现在Blackberry的WebKit浏览器中<input type="number"/>字段存在严重缺陷。它似乎是浏览器崩溃的根源。话虽如此，我们不再使用HTML 5功能......

Answer 3

Answer 4

我无权使用较旧的iOS设备进行测试，但这可以在现代iOS上使用，与此同时，谷歌浏览器也开始违反宽度标准：因此，它可以同时解决这两个问题：

input[type=number] {
  max-inline-size: none; /* chrome 71 */
  max-width: unset; min-width: unset; /* iOS12 */
}