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

Question

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

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

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

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

Answer 1

这个答案是相关的，但试图针对日期选择器：How to custom 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当输入具有焦点时 是条件类。