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

注意：我的第二个示例（带有类的示例）将应用于所有浏览器。

之前已经回答了similar question，但它对我没有用。

Answer 2

您可以这样做：

[-1, 2, 0, -5]

Answer 3

使用CSS更好的方法就是这样：

input[type=time]{
color: blue;
opacity: 34%;

}

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

3 个答案: