如何阻止 Safari 16 (macOS) 在 HTML type="date" 输入中默认为当前日期？

Question

尝试在未选择日期时将 Safari 日期字段设置为空白（即不是默认为今天的日期），但我似乎无法弄清楚。

当没有给出日期值时，所有其他浏览器不会预填充日期字段，例如。

<input type="date" />

然而 Safari 坚持认为它应该显示一个占位符，例如今天的日期值。

尝试覆盖如下所示的占位符样式似乎没有任何效果：

input[type="data"]::placeholder {
    color: transparent; /* Or any colour/display: none/etc */
}


input[type="data"]:placeholder-shown {
    color: transparent; /* Or any colour/display: none/etc */
}

将值设置为空字符串等也不起作用，将占位符值设置为其他值也不会执行任何操作。

Answer 1

webkit 浏览器上有几个可用于日期字段的伪类。在 Safari 中，为了能够看到它们，您可以检查元素并进入影子根目录。在日期字段的影子根中，您将找到 div 元素，其psuedo属性暗示可用的伪选择器：

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-day-field 
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-year-field 
::-webkit-datetime-edit-text

这允许您单独设置日期的每个部分的样式。遗憾的是，您无法使用 来定位占位符值:placeholder-shown。

目前，除非我弄错了，否则这意味着在 macOS 上的 Safari 16 中不可能在没有 JavaScript 的情况下摆脱占位符。

相反，您可以做的是使用事件在 Javascript 中跟踪onchange输入是否具有值并应用类。然后，您可以在应用该类时使用上面的伪选择器选择日期字段的各个元素。

例如（在常规 html/js 中）：

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-day-field 
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-year-field 
::-webkit-datetime-edit-text

当然，您可能希望使该代码在您选择的框架中可重用。

请记住，这也会隐藏其他浏览器上的占位符。虽然在大多数情况下这种一致性不会成为问题，但您可能需要进行一些浏览器检测来确定是否应应用隐藏的占位符。