如何更改Chrome输入日期占位符的文字颜色？

Question

我到处搜索,无法找到如何更改Chrome的阴影DOM输入日期元素的文本颜色.大多数占位符都是柔和的灰色,但Chrome的阴影DOM文本是黑色的,然后当您添加日期时,文本颜色保持不变.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" />

注意:我的第二个示例(带有类的示例)将应用于所有浏览器.

一个类似的问题已经回答过了,但它并没有为我工作.