Safari浏览器原生日期输入框占位符文本颜色异常问题排查及解决方案咨询

我来帮你梳理这两个问题的答案：

这是不是Safari的Bug？ #

这种行为确实可以算Safari的设计缺陷（或者说未遵循标准的不一致行为）。其他主流浏览器（比如你提到的Firefox）会直接继承输入框的color属性作为占位符的颜色，但Safari会对基础文本颜色自动做淡化处理——尤其是当基础颜色饱和度不高时，就会出现你遇到的亮青色这种完全不符合预期的效果。

虽然Safari官方可能把这种处理当作一种“视觉优化”，但从开发者的角度来说，它破坏了样式一致性的预期，而且在大多数场景下都会导致占位符可读性下降，所以完全可以认为这是一个不合理的Bug。

如何定位并覆盖占位符颜色？ #

你之前尝试的::-webkit-datetime-edit确实只影响日期分隔符，要修改占位符文本的颜色，需要针对Safari拆分的日期字段伪元素来设置样式。具体来说，Safari会把日期输入框的占位符（它显示的默认日期）拆成年、月、日三个独立的字段，我们可以通过以下CSS来强制覆盖它们的颜色：

input[type="date"] {
  font-size: 22px;
  color: rgb(0 50 50);
}

/* 仅在输入框未聚焦且无有效值时（即显示占位符状态）生效 */
input[type="date"]:not(:focus):not(:valid)::-webkit-datetime-edit-year-field,
input[type="date"]:not(:focus):not(:valid)::-webkit-datetime-edit-month-field,
input[type="date"]:not(:focus):not(:valid)::-webkit-datetime-edit-day-field {
  color: rgb(0 50 50);
}

/* 如果你需要同步调整分隔符的颜色，可以保留这个规则 */
input[type="date"]::-webkit-datetime-edit-text {
  color: rgb(0 50 50);
}

这里的:not(:focus):not(:valid)是关键，它能确保我们的样式只作用在占位符状态下，不会覆盖用户输入日期后的文本颜色。通过这个方式，就能强制Safari的日期占位符文本显示你想要的颜色，避免它自动淡化的问题。

内容的提问来源于stack exchange，提问作者harryg