html - 如何更改 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" />

NOTE: My second example (the one with a class) will be applied in all browsers.

A similar question之前已经回答过，但它对我不起作用。