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

Question

I am using html input element with type as date,

<input type="date"> 

When I use above element it creates a default date format i.e. mm/dd/yyyy text within that input element. How do I remove this default text?

I tried adding below style on my page but it is hiding the selected date value as well,

input[type=date]::-webkit-datetime-edit-text {     -webkit-appearance: none;     display: none; } input[type=date]::-webkit-datetime-edit-month-field{     -webkit-appearance: none;     display: none; } input[type=date]::-webkit-datetime-edit-day-field {     -webkit-appearance: none;     display: none; } input[type=date]::-webkit-datetime-edit-year-field {     -webkit-appearance: none;     display: none; } 

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

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