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;
}

Answer 5

具有placeholder的输入字段目前不支持type="date" - 属性，因此无法设置其样式。看看这个有效属性列表：

w3.org: "input type=date – date input control"

因此，Chrome实际上与Safari相反，而Safari根本不关心date类型。

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

5 个答案: