日期输入占位符在 Safari 中具有奇怪的文本颜色

Question

我的网页正在表单中呈现本机日期输入。输入初始化时没有任何值，因此由浏览器来显示占位符。

我将日期输入的文本颜色设置为

rgb(0 50 50)

。

例如在 Firefox 中，占位符（针对我的区域设置）是

dd/mm/yyyy

。它呈现如下：

然而，在 Safari（版本 15.6.1）中，可能由于某些（可以说是误导性的）尝试淡化占位符文本，输入的占位符以明亮的青色文本颜色呈现。大概是一些

rgb(0 50 50)

的调整。

（Safari 使用当前日期作为占位符而不是

dd/mm/yyyy

，但这与问题无关。）

请参阅此处的示例：

input {
  font-size: 22px;
  color: rgb(0 50 50);
}

<input type="date" />

我的问题是第一；这是 Safari 中的错误吗？这种行为看起来几乎总是不受欢迎的，除非输入文本颜色的饱和度非常低。 Safari 似乎是根据对基本文本颜色的一些简单调整来为占位符选择颜色。

其次，是否有某种方法可以定位此占位符文本并以某种方式覆盖颜色？我尝试过

::-webkit-datetime-edit

但这只会影响日期部分之间的斜杠，而不影响实际文本本身。

Answer 1

我只能回答你问题的后半部分，但也许有帮助。

这就是我在 Safari (17.1.2) 版本中设置文本颜色样式的方式，它的工作原理是：

input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-text {
  color: red; // my custom color
}

我的问题是 Safari 由于某种原因以颜色 input[type="date"] 呈现所有

disabled

graytext

字段。这只发生在 Safari 中（不在 Chrome 或 Firefox 中），并且似乎使用上面的 hack 是覆盖此行为的唯一方法。