How to style the date input placeholder for Contact Form 7

Question

How do I change the dd/mm/yyyy placeholder of a date input, and have a different color text once a date is selected?

I have tried the following code to no avail:

input[type="date"] {
    color: pink;
}

::-webkit-datetime-edit-day-field[aria-valuetext=blank],
::-webkit-datetime-edit-month-field[aria-valuetext=blank],
::-webkit-datetime-edit-year-field[aria-valuetext=blank] {
  color: gren;
}

And

input[type="date"] {
    color: pink;
}

::-webkit-datetime-edit-day-field:not([aria-valuetext]),
::-webkit-datetime-edit-month-field:not([aria-valuetext]),
::-webkit-datetime-edit-year-field:not([aria-valuetext]) 
{
  color: green;
}

And

input[type="date"] {
    color: pink;
}

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

HTML

<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">
</span>

None of these styles work for altering the placeholder and having the selected date a different color. I imagine these solutions are outdated as I cannot find any answers on here relating to 2017-2018.

Answer 1

There is a way to do this, but it needs that you add the required attribute to the input. Then, you can use the :valid and :invalid pseudo-selectors for style the input when his value have or not a valid format. Check next examples, the first one just make text green when a date is selected, otherwise the text keep black:

input[type="date"]:valid {
    color: green;
}

<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" required>
</span>

This next one, is similar to previous, but adds a red text when date is invalid and we hover over the input.

input[type="date"]:valid {
    color: green;
}

input[type="date"]:invalid:hover {
    color: red;
}

<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" required>
</span>

The last alternative (not CSS only), using JQuery (and without the required attribute) is using a listener on the input event and check the value in order to manipulate the style of the input:

$("input[type='date']").on('input', function()
{
    $(this).css("color", "red");
    
    if ($(this).val())
        $(this).css("color", "green");
});

<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">
</span>