是否可以在 HTML5 input 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

多虧了現有的答案，我才得以解決。當date字段具有值時，day month和year字段僅獲得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

type="date"的輸入字段當前不支持placeholder -attribute，因此無法設置樣式。 查看以下有效屬性列表：

w3.org：“輸入類型=日期-日期輸入控件”

因此，Chrome實際上與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屬性，否則在設置值時您將獲得占位符樣式的文本。 或者，通過執行相反的操作並僅在未設置值時進行定位來選擇加入該行為。