本机 html 日期选择器样式

Question

sommeone 知道如何在用户选择日期后更改文本的颜色？ 如果可能的话，只用 css 来实现它。

我有这个颜色：

input[type="date"]::-webkit-datetime-edit-text { color: #dbdbdb }
input[type="date"]::-webkit-datetime-edit-month-field { color: #dbdbdb; }
input[type="date"]::-webkit-datetime-edit-day-field { color: #dbdbdb; }
input[type="date"]::-webkit-datetime-edit-year-field { color: #dbdbdb; }

因此，在用户选择日期后，我想更改此输入文本/占位符颜色。

Answer 1

您可以通过使输入字段成为必填字段，然后将伪元素用于输入字段来实现。

.form-control:valid {
color: green;
}
.form-control:invalid {
color: black;
}

<input type="date" class="form-control" placeholder="Your input" required>

如果您不想使字段成为必填字段，则可以使用伪元素"占位符显示"。

input:not(:placeholder-shown) {
color: green;
}
input:placeholder-shown {
color: black;
}

可能覆盖比仅使用 WebKit 技术更多的设备