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

Question

我已经到处搜索了，但找不到如何更改Chrome的shadow DOM输入日期元素文本颜色。大多数占位符都有柔和的灰色，但Chrome的shadow DOM文本是黑色的，当你添加日期时，文本颜色仍然保持不变。 Chrome已经将shadow DOM文本设置为“mm/dd/yyyy”，这就是我需要更改的文本颜色。

<input type="date"/>

- rachiebytes

---

这并不是一个占位符（占位符的定义为placeholder="某个占位符"） - Adam Jenkins

那么这是什么呢？@Adam - rachiebytes

日期元素的影子DOM的一部分。所有其他的“placeholder”都是通过HTML中的“placeholder”属性定义的，因此它不是一个占位符。样式化影子DOM：http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ - Adam Jenkins

你是指在框中选择日期后出现的值吗？ - Code Warrior

把默认占位符文本的样式应用到HTML5输入类型为日期的元素上，是否可行？ - int32_t

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

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

之前已经回答过一个类似的问题，但是对我并没有起作用。

- Jonas Petersson

---

谢谢！虽然它没有解决我的原始问题。我正在寻找的是，如果您输入自己的值，则通用“占位符”的文本颜色为灰色，但该值的文本颜色将变为黑色。这就是大多数输入元素的工作方式。 - rachiebytes

这几乎就是它的工作原理。但是您需要输入有效日期才能更改颜色。不确定是否可能在输入某些值时更改日期输入的颜色。 - Jonas Petersson

Answer 2

我在这里提供一个非常简单的React解决方案，供需要的人参考！

/* placeholder text style */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  color: #888;
}

/* regular text style */
input[type="date"].date-input--has-value::-webkit-datetime-edit-text,
input[type="date"].date-input--has-value::-webkit-datetime-edit-month-field,
input[type="date"].date-input--has-value::-webkit-datetime-edit-day-field,
input[type="date"].date-input--has-value::-webkit-datetime-edit-year-field {
  color: #f8f9fa;
}

<input
  type="date"
  name="date"
  className={(this.state.date) ? 'date-input--has-value' : ''}
  value={this.state.date}
  onChange={this.handleChange}
/>

基本上只需根据状态值是否存在触发CSS类。显然，这仅适用于受控组件 - 但如果您已经设置了这个，则添加一个快速的条件运算符和一些CSS样式非常容易！

我使用的颜色是我需要的黑暗主题网站，但您可以将它们更改为任何您喜欢的颜色。为了完全定位整个文本字段，需要四个不同的CSS选择器 - 第一个选择器仅针对“/”（或“。”，具体取决于语言环境）日期分隔符，下面的三个选择器分别单独针对该字段的月份、日和年份部分。是的，如果您感觉有必要，每个单独的选择器都可以使用不同的颜色...

--

忽略“运行代码片段”部分，因为它显然没有完整的React组件连接等功能。我只是使用片段视图，因为这是一种漂亮的方式来显示CSS和HTML并排。

- Fateh Khalsa

---

时间颜色没有改变。 - Thilanka De Silva

Answer 3

更好的CSS简单方法就是这样做：

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

}

- Itzik Osher

---

请在发布帖子之前阅读主题。

1. 主题是更改占位符的颜色，但不更改所选值的颜色。
2. 主题是本地日期，而不是本地时间输入。

- Edward Munch

Answer 4

你可以这样做：

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

- mahmoud

---

欢迎来到 Stack Overflow。这个答案最终被放入了低质量帖子审查队列。在格式化多行代码示例时，请将它们格式化为代码块。仅有代码的回答几乎总是可以通过添加一些解释来改进。 - Jason Aller