android - 从 Android Chrome 中的时间输入中删除箭头

Question

我正在开发一款也可用于小型智能手机的网络应用程序。表单中的字段之一是时间输入字段。我需要它既漂亮又小，55 像素的宽度在大多数操作系统和浏览器上都能满足要求。

<input type="time" value="12:34" style="width:55px">

但是，Android Chrome 总是有一些额外的空间:

当我添加“-webkit-appearance: none”时，箭头消失但留下一个空白空间，所以我的时间仍然被切断了。 我已经尝试了很多控件，这些控件解决了我桌面上 Chrome 中的其他问题(旋转按钮、清除按钮等)。但我发现没有任何东西可以在 Android Chrome 中将其删除。

有谁知道如何摆脱这个？ 使用 Chrome 56 在 Android 5 和 6 上进行了测试。

快速示例 https://jsfiddle.net/nm97kvk0/2/

Answer 1

我试过了

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

与

::-webkit-inner-spin-button,
::-webkit-outer-spin-button,
::-webkit-clear-button,
::-webkit-calendar-picker-indicator

它适用于桌面。 Android Chrome 中没有箭头，但箭头下的背景仍然存在，并覆盖了最后一位数字的一部分(

桌面版 Chrome

安卓浏览器