如何为输入类型=“日期”的占位符文本着色[重复]

【问题标题】：how to color the placeholder text of input type="date" [duplicate]如何为输入类型=“日期”的占位符文本着色[重复]
【发布时间】：2021-12-06 06:40:04
【问题描述】：

我发现很多关于 input type="date" 的问题，但没有一个关于占位符文本颜色的问题。

如何更改 <input type="date" /> 的占位符文本颜色？

我正在尝试将占位符文本设置为不同的颜色，但这不起作用：

/** won't work */
input::placeholder {
  color: grey;
}

/** this changes the text color of the entire input, not just the placeholder */
input::-webkit-datetime-edit {
  color: grey;
}

【问题讨论】：

当用户开始输入时你希望发生什么？是 dd/mm/yyyy 改回默认颜色（通常是一种灰色）吗？
@AHaworth 好电话。我相信它是最好的，就像占位符一样。当您输入 1 个字符时，它会停止显示为灰色，当您再次清除该字符时，它会再次恢复为灰色。
这能回答你的问题吗？ How can I change the text color of Chrome's input date placeholder?

标签： css input

【解决方案1】：

实现这一点的唯一方法是添加您自己的指示器，无论输入是否为空。（带有 JS 或 HTML 属性）

HTML5 方式

您可以将required 添加到您的<input type="date" required />。

然后你可以这样定位它：

input[type="date"]:not(:valid)::-webkit-datetime-edit {
  color: grey;
}

JavaScript 方式

无论输入是否为空，向您的<input type="date" /> 添加和删除一个类（例如.empty）。

然后你可以这样定位它：

input.empty::-webkit-datetime-edit {
  color: grey;
}

【讨论】：