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

Solution 1:

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

Solution 2:

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

Solution 3:

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

Solution 4:

This should be transparent only when value is not set.

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

Solution 5:

This works for me in chrome as of Version 73.0.3683.103

::-webkit-datetime-edit { color: transparent; }
:focus::-webkit-datetime-edit { color: #000; }

I couldn't figure it out for Edge though so i changed it to this

input[type=date] { color: transparent !important; } 
.active input[type=date] { color: inherit !important; }

this may not be good for some of you but i was adding the class of active anyway as my labels hover of the input field until clicked and then i move them up out the way. Hence why i needed to not display the date placeholder while the label was over the input