Question

我正在开发一个也适用于小型智能手机的webapp。表单中的一个字段是时间输入字段。我需要这个很好很小，宽度为55px可以解决大多数操作系统和浏览器的问题。

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

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

当我添加“-webkit-appearance：none”时，箭头消失但留下空白空间，所以我的时间仍然被切断。我尝试了很多控件，并在桌面上解决了Chrome中的其他问题（旋转按钮，清除按钮等）。但我发现的任何内容都不会在Android Chrome中删除它。

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

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中没有箭头，但是箭头下的背景仍然存在，并且覆盖了最后一位数字（

台式机铬

Android Chrome