Is It Possible To Style The Default Placeholder Text On An Html5 Input Type="date" Element? In Chrome?

October 26, 2023 Post a Comment

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 (

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

<inputtype="date">
  #document-fragment
    <divdir="ltr"pseudo="-webkit-date-and-time-container"><divpseudo="-webkit-datetime-edit"><spanaria-help="Day"aria-valuemax="31"aria-valuemin="1"pseudo="-webkit-datetime-edit-day-field"role="spinbutton">dd</span><divpseudo="-webkit-datetime-edit-text">/</div><spanaria-help="Month"aria-valuemax="12"aria-valuemin="1"pseudo="-webkit-datetime-edit-month-field"role="spinbutton">mm</span><divpseudo="-webkit-datetime-edit-text">/</div><spanaria-help="Year"aria-valuemax="275760"aria-valuemin="1"pseudo="-webkit-datetime-edit-year-field"role="spinbutton">yyyy</span></div><div></div><divpseudo="-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;
}

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

Solution 3:

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)

Solution 4:

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

Solution 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.

Html5 Ready