是否可以在 HTML5 输入 type="date" 元素上设置默认占位符文本的样式？在 Chrome 中？

Question

我有一个带有日期列表的表单，我使用 HTML 5

input type="date"

元素来表示它们。我想更改没有值的字段（即显示

dd/mm/yyyy

的字段）的颜色，以便更容易将它们与包含实际日期的字段区分开来。

这可能吗？我以为

-webkit-input-placeholder

可能已经做到了我想要的，但似乎没有。

Answer 1

Chrome 中的日期输入中没有占位符。如果您在 devtools 的设置中选中“显示影子 DOM”，您将能够检查它：

<input type="date">
  #document-fragment
    <div dir="ltr" pseudo="-webkit-date-and-time-container">
      <div pseudo="-webkit-datetime-edit">
      <span aria-help="Day" aria-valuemax="31" aria-valuemin="1" pseudo="-webkit-datetime-edit-day-field" role="spinbutton">dd</span>
      <div pseudo="-webkit-datetime-edit-text">/</div>
      <span aria-help="Month" aria-valuemax="12" aria-valuemin="1" pseudo="-webkit-datetime-edit-month-field" role="spinbutton">mm</span>
      <div pseudo="-webkit-datetime-edit-text">/</div>
      <span aria-help="Year" aria-valuemax="275760" aria-valuemin="1" pseudo="-webkit-datetime-edit-year-field" role="spinbutton">yyyy</span></div>
      <div></div>
      <div pseudo="-webkit-calendar-picker-indicator"></div>
    </div>
</input>

您可以使用伪元素设置单独元素的样式（适用于 Chrome Canary）：

::-webkit-datetime-edit-year-field {
  font-weight: bold;
}

Answer 2

感谢现有的答案，我设法解决了这个问题。当日期字段具有值时，日、月和年字段仅获得

aria-valuetext

属性。这意味着当日期字段显示其默认值时，我可以设置这些值的样式，如下所示：

::-webkit-datetime-edit-day-field:not([aria-valuetext]),
::-webkit-datetime-edit-month-field:not([aria-valuetext]),
::-webkit-datetime-edit-year-field:not([aria-valuetext]) 
{
  color: #999;
}

Answer 3

从 Chrome 31（可能更早）开始，aria-valuetext 是“空白”而不是 null。以下工作之一

::-webkit-datetime-edit-year-field[aria-valuetext=blank]
::-webkit-datetime-edit-year-field:not([aria-valuenow])

而不是：

::-webkit-datetime-edit-year-field:not([aria-valuetext])

（我没有代表对相关答案发表评论）

Answer 4

编辑：这不再起作用

我希望“占位符”文本为灰色。根据@JackBradford的回答，我正在使用：

::-webkit-datetime-edit-text, /* this makes the slashes in dd/mm/yyyy grey */
::-webkit-datetime-edit-day-field[aria-valuetext=blank],
::-webkit-datetime-edit-month-field[aria-valuetext=blank],
::-webkit-datetime-edit-year-field[aria-valuetext=blank] {
  color: lightgrey;
}

Answer 5

带有

placeholder

的输入字段当前不支持

type="date"

属性，因此无法设置样式。看看这个有效属性列表：

w3.org：“输入类型=日期——日期输入控件”

Chrome 的做法实际上是正确的，这与 Safari 不同，Safari 根本不关心

date

类型。

Answer 6

正如一些评论中提到的，这些解决方案似乎都不适用于最新版本的 Chrome，我可以验证从 v94 开始仍然如此。正如 Eli 提到的，在尝试选择伪元素的属性时似乎存在问题。

如果您不介意使用一点 JavaScript 在

<input type="date" />

元素上设置属性，那么可以想出一个 hacky CSS 选择器作为解决方法。

例如，一旦输入有值，我就使用 JavaScript 设置

data-hasvalue

属性，然后使用以下 SCSS。

  &[type="date"]:not([data-hasvalue]):not(:invalid):not(:focus) {
    &::-webkit-datetime-edit-text,
    &::-webkit-datetime-edit-day-field,
    &::-webkit-datetime-edit-month-field,
    &::-webkit-datetime-edit-year-field {
      color: rgb(117, 117, 117); // Chrome's default color for input placeholder text
    }
  }

确保为所有日期输入设置

data-hasvalue

属性，否则在设置值时您将获得占位符样式文本。或者，通过执行相反的操作并仅在“未设置”值时进行定位来选择加入该行为。

Answer 7

占位符只要值为空且不聚焦，就有不同的样式

input[type=date]:invalid {
  color: lightgray;
}

input:focus::-webkit-datetime-edit {
  color: initial;
}

<input type="date" required />