how to color the placeholder text of input type="date"

Issue

I found many questions on input type="date" but none of them on the placeholder text color.

How do I change the placeholder text color of <input type="date" /> ?

I'm trying to make the placeholder text a different color, but this won't work:

/** won't work */
input::placeholder {
  color: grey;
}

/** this changes the text color of the entire input, not just the placeholder */
input::-webkit-datetime-edit {
  color: grey;
}

Solution

The only way to achieve this is by adding your own indicator wether or not the input is empty or not. (with JS or HTML attrs)

The HTML5 way

You can add required to your <input type="date" required />.

Then you can target it like so:

input[type="date"]:not(:valid)::-webkit-datetime-edit {
  color: grey;
}

The JavaScript way

Add and remove a class (eg. .empty) to your <input type="date" /> whenever the input is empty or not.

Then you can target it like so:

input.empty::-webkit-datetime-edit {
  color: grey;
}

Answered By - mesqueeb