如何删除桌面版 Safari 中的默认时间（中午 12:30）？

Question

我正在使用一些

type="time"

输入在网络应用程序中收集当地时间。用户可以看到他们已包含哪些输入以及哪些输入尚未输入，这一点很重要。在桌面 Safari 中，我注意到 webkit 似乎自动插入 12:30 PM 作为默认时间。我想让用户清楚地看到该字段当前没有时间。我想找到一种方法，当用户自己没有包含时间时，不显示任何输入，或者如果这不起作用，找到一种方法专门针对没有输入的字段，以便我可以更改样式明显不同（即具有透明颜色）。

我想要的行为是让空输入显示为空，就好像小时/分钟/子午线占位符文本是清晰的。

我可以使用下面的小提琴验证时间在我尝试过的所有浏览器（桌面版 Safari 除外）中是否正确显示为空。我还有其他代码来调整宽度，但为了简单起见，小提琴的 CSS 是从一个输入的属性复制的。

链接到此处当前样式的问题的最小重现：https://jsfiddle.net/1g92ek3z/1/。

Answer 1

这个答案是相关的，但试图针对日期选择器：如何自定义 html5 datepicker。

我发现了浏览器伪选择器，可用于在时间输入中定位浏览器默认元素：

::-webkit-datetime-edit,
::-webkit-datetime-edit-wrapper,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-meridiem-field

请注意 - 如果您在这些相应元素上设置

display: none

或

visibility: hidden

，它也会破坏输入功能。

所以我的解决方案最终根据字段是否具有值和/或焦点来更改输入颜色；像这样的东西：

input[type="time"]:not(.has-value):not(.focus-visible) {
  color: #EFEFF0;
}

...其中

has-value

是输入有值时的条件类，

focus-visible

是输入具有焦点时的条件类。

Answer 2

这是我的解决方案，这对我来说是视觉上最令人愉悦的示例。

我制作了一个 js 脚本，当值出现在输入中时，该脚本会将“has-value”类分配给输入。

input[type='time']:not(.has-value) {
    &::-webkit-datetime-edit-hour-field,
    &::-webkit-datetime-edit-text,
    &::-webkit-datetime-edit-minute-field {
        &:not(:focus) {
            opacity: 0.3;
        }
    }
}