Comment masquer l'espace réservé par défaut dans les éléments de saisie de date HTML5 ?

Comment masquer l'espace réservé par défaut dans les éléments de saisie de date HTML5

Lors de l'utilisation d'éléments de saisie HTML5 de type="date", vous pouvez rencontrer un format de date par défaut (par exemple, mm/jj/aaaa) apparaissant dans le champ de saisie. La suppression de ce texte par défaut peut améliorer l'expérience utilisateur et éviter toute confusion ou saisie de données inutile.

Une approche consiste à exploiter les styles CSS pour modifier l'apparence du champ de saisie. Cependant, il est important d'éviter de masquer les valeurs de date essentielles, comme dans l'exemple que vous avez fourni.

Pour obtenir le résultat souhaité, pensez à utiliser ce code CSS amélioré :

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

Ce code modifie le apparence des champs année, mois et jour dans l’élément d’entrée. Lorsqu'aucune date valide n'est saisie, elles s'afficheront de manière transparente, masquant efficacement l'espace réservé par défaut sans affecter la valeur de date sélectionnée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!