Remove default text/placeholder present in html5 input element of type=date

The accepted answer doesn't seem to work anymore on latest chrome versions. Tested it on Version 50.0.2661.102 and didn't work.

Works by adding this instead:

.mdl-textfield:not(.is-dirty) input::-webkit-datetime-edit {
     color: transparent; 
}

input:focus::-webkit-datetime-edit {
    color: rgba(255, 255, 255, .46) !important; 
}

Working sample

Source

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
    color: transparent;
}

This should be transparent only when value is not set.

input[value="0000-00-00"]::-webkit-datetime-edit {
     color: transparent; 
}

Possible option

HTML:

<input type='date' required>

CSS:

input[type=date]:required:invalid::-webkit-datetime-edit {
    color: transparent;
}
input[type=date]:focus::-webkit-datetime-edit {
    color: black !important;
}