javascript - 为什么 "date"和 "time"条目在 Google Chrome Mobile 中显示不正确？

Question

我有一个我开发的小型调度系统 ( Look here)。

“日期”和“时间”条目在大多数桌面和移动浏览器中正常显示:

但出于某种原因我不知道!在 Google Chrome Mobile 中，灰色背景色出现在“日期”和“时间”字段中。此外，默认图标消失了:

我在所有浏览器中都进行了测试，但这只发生在 Google Chrome Mobile 上。我想尽快解决这个问题，我不知道发生了什么，我已经在这个问题上待了 1 周。

我使用的是 Chrome 版本 101.0.4951.41。

这是 GitHub 上的元素存储库.

Answer 1

这是输入框的边框属性:Chrome Mobile 正在设置日期和时间输入框的背景以匹配边框。

我猜您希望所有输入都匹配，因此在表单中的输入上设置背景颜色会产生预期的效果:

background-color: #fff;

我还建议不要删除 outline，因为它用于可访问性原因(屏幕阅读器)。

所以你的整个风格看起来像这样:

#form-field input {
    width: 100%;
    padding: 15px;
    border: 1px solid #a3a3a3;
    background-color: #fff;
    margin: 10px 0;
}

日期和时间输入相对较新，因此跨浏览器支持很棘手(众所周知，Safari Mobile 多年来不支持日期选择器)。 MDN has some guidance关于检测浏览器兼容性。