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.

Folly

Answer 1

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

Isosteric

+1 for helping me find "Show shadow DOM" in Dev Tools – Smallsword

This is really cool. Thanks for the info. Would anyone know if something similar is possible in Firefox? I know how to enable the shadow DOM, but didn't find any way to apply styling to elements inside that shadow DOM in Firefox, sadly. – Thimerosal

Answer 2

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

Folly

Answer 3

Edit: This does not work anymore

I wanted the "placeholder" text to be gray. Based on @JackBradford's answer, I'm using:

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

Indoxyl

This answer seems closest. Slashes will not change color though. – Knorring

I could have sworn this code was working for me a while ago when I implemented it, but it no longer seems to work for me in Chrome 59 (and Canary 61). Codepen. Shouldn't one of these rules turn the year grey? – Bushido

Joining @Bushido in response here, 4 years later. None of these appear to work. You can select the psuedoelement. But selecting the attribute on the psuedoelement fails in CSS for Chrome. Nothing I've tried works. Anyone know any updates? – Scarbrough

@Scarbrough I haven't looked into the Chromium issue tracker to see if there's any further information on this, but, if it's still relevant to you, I have answered below with an alternative solution. – Pfennig

Answer 4

As of Chrome 31 (possibly earlier), aria-valuetext is 'blank' rather than null. Either of the following work

::-webkit-datetime-edit-year-field[aria-valuetext=blank]
::-webkit-datetime-edit-year-field:not([aria-valuenow])

rather than:

::-webkit-datetime-edit-year-field:not([aria-valuetext])

(I Don't have the rep to comment on the relevant answer)

Gusset

a caveat seems to be that although you can style the before/after elements e.g.: ::-webkit-datetime-edit-year-field:before you cannot style ::-webkit-datetime-edit-year-field[aria-valuetext=blank]:before. (I was trying to replace the placeholder with a translated one for different locales) – Demetri

Answer 5

The placeholder-attribute is currently not supported by input fields with type="date" and therefor can't be styled. Take a look at this list of valid attributes:

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

So Chrome is actually doing it right in contrary to Safari, which doesn't care about the date-type at all.

Sander

Answer 6

My 2023 solution

placeholder has a different style as long as the value is empty and not focused, and the required attribute is present.

input[type=date]:invalid {
  color: lightgray;
}

input:focus::-webkit-datetime-edit {
  color: initial;
}

<input type="date" required />

Foil

Works, but only if required attribute exists. – Vandusen

Yes, hence the example – Foil

Answer 7

As mentioned in a couple of the comments, none of these solutions seem to be working in more recent versions of Chrome and I can verify this is still the case as of v94. As Eli mentions it seems to be problematic when attempting to select the attribute of a pseudo-element.

If you don't mind using a little bit of JavaScript to set an attribute on the <input type="date" /> element then it is possible to come up with a hacky CSS selector as a workaround.

For example, I'm using JavaScript to set a data-hasvalue attribute once the input has a value, and then using the following 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
    }
  }

Be sure that the data-hasvalue attribute is set for all date inputs, otherwise you will get placeholder style text when a value is set. Alternatively, opt in to the behaviour by doing the opposite and targeting only when a value is not set.

Pfennig