原生Html Datepicker风格

Question

sommeone knows how I can change the color of the text, after an User select a date?如果可能的话，实现它只用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>

如果你不想将该字段设为必填字段，你可以使用伪元素 "placeholder-shown"。

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

input:placeholder-shown {
  color: black;
}

比起只使用WebKit技术，可能会覆盖更多的设备。