Maison  >  Article  >  interface Web  >  Comment supprimer le texte d'espace réservé par défaut des entrées de date HTML5 ?

Comment supprimer le texte d'espace réservé par défaut des entrées de date HTML5 ?

DDD
DDDoriginal
2024-11-09 17:57:02426parcourir

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

Suppression du texte par défaut de la saisie de date HTML5

L'élément de saisie HTML5 avec type="date" offre un moyen pratique de sélectionner des dates, mais il affiche souvent un format de date par défaut (par exemple, mm/jj/aaaa) comme espace réservé dans le champ de saisie. Ce texte d'espace réservé peut être gênant ou indésirable dans certaines situations.

Pour supprimer ce texte par défaut tout en permettant aux utilisateurs de sélectionner des dates :

  1. Utilisez le CSS ' ::-webkit-datetime-edit-*' sélecteurs :

    Ces sélecteurs ciblent des parties spécifiques de l'élément de saisie de date, y compris les champs année, mois et jour.

  2. Définissez la couleur sur transparente pour les champs vides :

    En définissant la couleur sur transparente pour les champs qui n'ont pas de valeur actuellement sélectionnée (c'est-à-dire les champs avec un attribut « aria-valuenow » vide), vous pouvez masquer efficacement l'espace réservé par défaut texte.

::-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 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn