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

我想在移动应用程序上使用 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样式我可以申请撤消这个额外的右边距?

实际上提问者本人非常接近答案,因为他知道这是微调器的错误,幸运的是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/

希望它有所帮助.

相关文章
相关标签/搜索