Entfernen des Standardtexts aus der HTML5-Datumseingabe

Das HTML5-Eingabeelement mit type="date" bietet eine bequeme Möglichkeit, Datumsangaben auszuwählen, aber Oftmals wird im Eingabefeld ein Standarddatumsformat (z. B. mm/tt/jjjj) als Platzhalter angezeigt. Dieser Platzhaltertext kann in bestimmten Situationen ablenkend oder unerwünscht sein.

So entfernen Sie diesen Standardtext, während Benutzer weiterhin Daten auswählen können:

1. Verwenden Sie das CSS ' ::-webkit-datetime-edit-*' Selektoren:

   Diese Selektoren zielen auf bestimmte Teile des Datumseingabeelements ab, einschließlich der Felder für Jahr, Monat und Tag.

2. Setzen Sie die Farbe auf transparent für leere Felder:

   Indem Sie die Farbe auf transparent für Felder setzen, die keinen aktuell ausgewählten Wert haben (d. h. Felder mit einem leeren ' aria-valuenow‘-Attribut), können Sie den Standard-Platzhaltertext effektiv ausblenden.

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