How can I change the text color of Chrome's input date placeholder?

Question

I have searched everywhere and cannot find how to change the text color of Chrome's shadow DOM input date element. Most placeholders have a soft gray color but Chrome's shadow DOM text is black and then when you add the date, the text color stays the same. Chrome already has shadow DOM text as "mm/dd/yyyy" and that's the text color that I need to change.

<input type="date"/>

Answer 1

If the input field is required you can use the :invalid selector like this:

input[type=date]:invalid::-webkit-datetime-edit {
    color: #999;
}

<input type="date" required /><br>

Another solution is to add a class to the input which you remove when a value has been entered.

var el = document.getElementById('date');
el.onchange = function() {
    if (el.value === '') {
        el.classList.add("empty");
    } else {
        el.classList.remove("empty");
    }
}

.empty {
    color: #999;
}

<input type="date" id="date" class="empty" />

NOTE: My second example (the one with a class) will be applied in all browsers.

A similar question has been answered before, but it didn't work for me.

Answer 2

Adding my super simple React solution here, for anyone who needs it!

/* placeholder text style */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  color: #888;
}

/* regular text style */
input[type="date"].date-input--has-value::-webkit-datetime-edit-text,
input[type="date"].date-input--has-value::-webkit-datetime-edit-month-field,
input[type="date"].date-input--has-value::-webkit-datetime-edit-day-field,
input[type="date"].date-input--has-value::-webkit-datetime-edit-year-field {
  color: #f8f9fa;
}

<input
  type="date"
  name="date"
  className={(this.state.date) ? 'date-input--has-value' : ''}
  value={this.state.date}
  onChange={this.handleChange}
/>

Basically just trigger a CSS class based on whether the state value exists or not. Only works for controlled components, obviously - but if you already have this set up, then adding a quick conditional operator and some CSS styling is really easy!

The colors I used are what I needed for my dark-theme website, but you can obviously change them to whatever you like. The four different CSS selectors are needed to fully target the entire text field - the first one targets just the '/' (or '.', depending on locale) date separators, and the next three individually target the month, day, and year parts of the field, respectively. Yes, you could make each individual one a different color, if you felt the need...

--

Ignore the 'Run code snippet' bit, as it obviously won't work without a full React component connected up and so on. I just used the snippet view, as it's a nice way to show both CSS and HTML side by side.