How do I change the color of input text for Chrome input date?

Question

I searched everywhere and can't find how to change the text color of the DOM input date element in Chrome. Most placeholders have a soft gray color, but the black text of the DOM DOM is black, and then when you add the date, the color of the text remains unchanged. Chrome already has shadow DOM text like "mm / dd / yyyy" and the color of the text I need to change.

<input type="date"/> 

Answer 1

If the input field is required, you can use : an invalid selector , for example:

 input[type=date]:invalid::-webkit-datetime-edit { color: #999; } 

 <input type="date" required /><br> 

Another solution is to add a class to the input that you delete when you enter a value.

 var el = document.getElementById('date'); el.onchange = function() { if (el.value === '') { el.classList.add("empty"); } else { el.classList.remove("empty"); } } 

 .empty { color: #999; } 

 <input type="date" id="date" class="empty" /> 

NOTE. My second example (with class) will be applied in all browsers.

A similar question has already been answered, but it did not help me.

Answer 2

You can do it like this:

 input[type=date] { color: #FFFFFF; }