当输入type = number时,android浏览器会使输入框变小

Question

我正在尝试将带有数字输入的表单放在一起,该表单在移动设备上弹出数字键盘.为此,我使用type = number的输入.它在桌面上正确呈现(在这种情况下,它的外观和行为与type = text的输入完全相同).在我的Windows Phone 8上,它也会正确显示并弹出数字键盘.

问题是当我在旧的Android(HTC One V)上测试它时,数字输入比使用type = text的输入稍微窄一些.您可以在此处查看我的代码标记:http://bootply.com/101579.这成为一个问题,因为我创建了一个带有input-group-addon的Bootstrap 3输入组.在我的HTC Android浏览器上,输入变得更短,因此输入框和输入框插件之间存在间隙.

你可以在这里看到我的意思:http: //www.browserstack.com/screenshots/a989247294985fc48ab3c3be9f4d1151e301384a.当您查看许多Android设备(包括Samsung Galaxy S III和HTC One X)的屏幕截图时,您可以看到type = number的输入呈现的范围更窄.当您查看任何iPhone或Motorola Droid 4时,您可以看到正确呈现的表单.

是否有解决此问题的方法,将使type = number的输入框与type = text的输入框的宽度相同？

编辑:我查看了模拟器列表,我意识到这只是Android 4.x股票浏览器的一个问题.

编辑:以上链接都不再有效.

Answer 1

试试这个css提示

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