How to style the date input placeholder for Contact Form 7

From your question, I understand that you want to change the color of the date once it is selected. I am suggesting to use JQuery, however I do understand you only tagged CSS.

You can easily achieve what you wanted by using JQuery method change(). I've also added an ID for your date field so that we can use getElementById to change the CSS when the date is set.

Also, when you click the cancel button, the date color can be changed to another color or go back to its original. In this example, I set it to red.

The idea is that when the date field is NOT empty, it will show green color. And when the date is empty, it will show another color (in this example is red, you can choose to set it back to original color. I did this so that you can see the green when not empty and red when empty).

So when the field is not empty, it means the length is > 0. Using that idea, we can set that when the date field is not empty, we change it to green and when its empty, we change it to red.

Try this:

$('#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: If you don't want the answer in JQuery, let me know and I'll delete this answer.

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>

You want to change color when selecting date.It that right! I understand like that. You can check on chrome.

input[type="date"] {
    color: pink;
}
::-webkit-datetime-edit-month-field:focus,::-webkit-datetime-edit-day-field:focus,::-webkit-datetime-edit-year-field:focus {
    color:green;
    background:transparent;
}

<input type="date" name="date-457" value="" aria-invalid="false">