从 Android Chrome 中的时间输入中删除箭头答案

【问题标题】：Remove arrow from time input in Android Chrome从 Android Chrome 中的时间输入中删除箭头
【发布时间】：2018-07-15 00:46:42
【问题描述】：

我正在开发一个也可用于小型智能手机的网络应用程序。表单中的一个字段是时间输入字段。我需要它又好又小，并且 55px 的宽度在大多数操作系统和浏览器上都可以解决问题。

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

不过，Android Chrome 总是有一些额外的空间：

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

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

【问题讨论】：

【解决方案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

Android Chrome

【讨论】：