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

Question

我有一个表单,上面有日期列表,我正在使用HTML 5 input type="date"元素来表示它们.我想更改没有值的字段(即显示的字段)的颜色,dd/mm/yyyy以便它们更容易与包含实际日期的字段区分开来.

这可能吗？我认为这-webkit-input-placeholder可能做了我想要的,但似乎没有.

Answer 1

Chrome中的日期输入中没有占位符.如果您在devtools的设置中选中"Show shadow 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;
}