How to Remove Default Text from HTML5 Date Input Element?

Removing Default Text from HTML5 Date Input Element

When utilizing the HTML input element with type as "date," it generates a placeholder text in the format "mm/dd/yyyy" by default. To remove this text, the following solution is provided:

Solution:

Instead of using the CSS code provided in the question, which also hides the selected date value, we can use the following CSS selector:

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

Explanation:

This CSS selector targets the individual date fields (year, month, and day) when their aria-valuenow attribute is not set, which corresponds to the placeholder text state. By setting their color to "transparent," the default text becomes invisible without affecting the visibility of the selected date value.

The above is the detailed content of How to Remove Default Text from HTML5 Date Input Element?. For more information, please follow other related articles on the PHP Chinese website!