How to Remove the Default Placeholder Text from HTML5 Date Inputs?

Removing Default Text from HTML5 Date Input

The HTML5 input element with type="date" provides a convenient way to select dates, but it often displays a default date format (e.g., mm/dd/yyyy) as a placeholder within the input field. This placeholder text can be distracting or undesirable in certain situations.

To remove this default text while still allowing users to select dates:

1. Use the CSS '::-webkit-datetime-edit-*' selectors:

   These selectors target specific parts of the date input element, including the year, month, and day fields.

2. Set the color to transparent for empty fields:

   By setting the color to transparent for fields that do not have a currently selected value (i.e., fields with a blank 'aria-valuenow' attribute), you can effectively hide the default placeholder text.

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

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