How to Remove the Default Placeholder Text from HTML5 Date Input Elements?

Remove Default Placeholder Text in HTML5 Date Input Element

The HTML5 date input element provides a convenient way to collect date values from users. However, it includes a default placeholder text in the format mm/dd/yyyy, which can be a distraction or conflict with specific date formats required.

Removing the Placeholder Text

To remove the default placeholder text, apply the following CSS to the date input element:

::-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 code targets specific subfields within the date input's editing interface. By setting the color to transparent, the default text becomes invisible. Notably, the not([aria-valuenow]) selector ensures that the placeholder text remains hidden even when a date is selected.

Unlike the previously attempted CSS, this method selectively hides the placeholder while preserving the visibility of the selected date value.

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