Comment masquer le texte d'espace réservé par défaut dans l'élément `` HTML5 ?

Comment supprimer le texte d'espace réservé par défaut du Élément

Lors de l'utilisation de l'élément d'entrée HTML5 avec le type défini sur « date », l'élément affiche automatiquement un format de date par défaut (mm/jj/aaaa) comme espace réservé à l'intérieur. Ce texte d'espace réservé peut constituer un obstacle dans certains scénarios.

Pour supprimer ce texte par défaut, évitez d'utiliser la règle de feuille de style suivante, car elle masquera la valeur de date sélectionnée :

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

Au lieu de cela, utilisez la règle CSS suivante pour masquer le texte d'espace réservé sans affecter la valeur de date sélectionnée :

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

Cette règle cible les champs année, mois et jour de l'élément de saisie de date et définit leur couleur sur transparent s'ils n'ont pas d'attribut "aria-valuenow". En conséquence, le texte de l'espace réservé devient invisible tandis que la date sélectionnée reste visible.

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!