Is it possible to style the default placeholder text on an HTML5 input type="date" element? in Chrome?

Question

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.

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

Answer 1

Thanks to the existing answers I managed to work it out.The day month and year fields only get an aria-valuetext attribute when the date field has a value. This means that I can style these values when the date field's showing its default value like this:

::-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 2

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>

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

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