How to Hide the Default Placeholder Text in HTML5's `` Element?

How to Remove the Default Placeholder Text from HTML5's Element

When using the HTML5 input element with the type set to "date," the element automatically displays a default date format (mm/dd/yyyy) as a placeholder within it. This placeholder text can pose a hindrance in certain scenarios.

To remove this default text, avoid using the following stylesheet rule, as it will conceal the selected date value:

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

Instead, use the following CSS rule to hide placeholder text without affecting the selected date value:

::-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 rule targets the year, month, and day fields of the date input element and sets their color to transparent if they do not have an "aria-valuenow" attribute. As a result, the placeholder text becomes invisible while the selected date remains visible.

The above is the detailed content of How to Hide the Default Placeholder Text in HTML5's `` Element?. For more information, please follow other related articles on the PHP Chinese website!