Из вашего вопроса я понимаю, что вы хотите изменить цвет даты после ее выбора.Я предлагаю использовать JQuery, однако я понимаю, что вы пометили только CSS.
Вы можете легко достичь того, что хотели, используя метод JQuery change().Я также добавил идентификатор для вашего поля даты, чтобы мы могли использовать getElementById для изменения CSS, когда дата установлена.
Кроме того, когда вы нажимаете кнопку отмены, цвет даты можно изменить на другой или вернуться к исходному.В этом примере я установил его на красный.
Идея состоит в том, что когда поле даты НЕ пусто, оно будет отображаться зеленым цветом.И когда дата пуста, она покажет другой цвет (в этом примере это красный, вы можете установить его обратно в исходный цвет. Я сделал это так, чтобы вы могли видеть зеленый, когда не пустой, и красный, когда пустой).
Поэтому, когда поле не пустое, это означает, что длина> 0. Используя эту идею, мы можем установить, что когда поле даты не пустое, мы меняем его на зеленый, а когда оно пустое, мы меняем его.на красный.
Попробуйте это:
$('#date').change(function()
{
if( $(this).val().length > 0 ) {
document.getElementById("date").style.color = "green";
} else {
document.getElementById("date").style.color = "red";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="wpcf7-form-control-wrap date-457">
<input type="date" name="date-457" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" aria-invalid="false" id="date">
</span>
ps: Если вам не нужен ответ в JQuery, дайте мне знать, и я удалю этот ответ.