可以在HTML5输入类型=“日期”上为默认占位符文本设置样式。元件？在Chrome中？ [英] Is it possible to style the default placeholder text on an HTML5 input type="date" element? in Chrome?

问题描述

我有一个包含日期列表的表单，我使用HTML 5 input type =date元素来表示它们。我想更改没有值的字段的颜色（即显示 dd / mm / yyyy 的颜色），以便更容易区分从包含实际日期的字段。

I have a form with a list of dates on it and I'm using the HTML 5 input type="date" element to represent them. I'd like to change the colour of the fields that don't have a value (i.e. those that show dd/mm/yyyy) so that they're more easily distinguishable from the fields that contain an actual date.

这是可能吗？我认为 -webkit-input-placeholder 可能已经做了我想要的，但似乎不是。

Is this possible? I thought that -webkit-input-placeholder might have done what I want, but it seems not.

推荐答案

Chrome中的日期输入中没有占位符。如果在devtools的设置中选中显示shadow DOM，您将可以检查它：

There is no placeholder in a date input in Chrome. If you check "Show shadow DOM" in devtools' settings, you will be able to inspect it:

<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中使用）为单独的元素设置样式：

You can style separate elements using their pseudos (works in Chrome Canary):

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

这篇关于可以在HTML5输入类型=“日期”上为默认占位符文本设置样式。元件？在Chrome中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！