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

css, date, html

Solution

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

Problem

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

Original source