Как изменить цвет текста ввода даты ввода Chrome?

Question

Я искал всюду и не могу найти, как изменить цвет текста элемента ввода даты DOM в Chrome. Большинство заполнителей имеют мягкий серый цвет, но тёмный DOM-текст Chrome черный, а затем, когда вы добавляете дату, цвет текста остается неизменным. У Chrome уже есть теневой текст DOM как «mm/dd/yyyy», и это цвет текста, который мне нужно изменить.

<input type="date"/> 

Answer 1

Если поле ввода требуется вы можете использовать :invalid селектор, как это:

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

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

Другим решением является добавление класса к входу, который вы удаляете, когда значение введено.

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

Примечание: Мой второй пример (один с классом) будет применяться во всех браузерах.

A similar question был дан ответ перед, но это не сработало для меня.