Comment supprimer le style par défaut de la date de type d'entrée en HTML5

Comment supprimer le style par défaut du type d'entrée date en HTML5 Voici une introduction détaillée à travers cet article. L'introduction spécifique est la suivante :

2. Modifiez le style du contrôle de date et d'heure. Actuellement, il existe les 9 pseudo-éléments suivants sous WebKit qui peuvent modifier l'interface utilisateur du contrôle de date :

 ::-webkit-datetime-edit - contrôle la zone d'édition ::-webkit-datetime-edit-fields-wrapper - contrôle la zone année, mois et jour ::-webkit-datetime-edit-text - contrôle l'année, le mois et jour Une barre oblique ou un tiret entre ::-webkit-datetime-edit-month-field – contrôle le mois ::-webkit-datetime-edit-day-field – Contrôlez le jour spécifique ::-webkit-datetime-edit-year-field – contrôlez le texte de l'année, comme l'espace occupé par les quatre lettres de 2017 ::-webkit-inner-spin-button – c'est le contrôle du petites flèches haut et bas :: -webkit-calendar-picker-indicator – Ceci contrôle la flèche déroulante ::-webkit-clear-button – Ceci contrôle le bouton d'effacement

Les éléments suivants incluent les pseudo-éléments utilisés par date, datetime, semaine et heure :

 input::-webkit-datetime-edit{}input::-webkit-datetime-edit-fields-wrapper{}input::-webkit-datetime-edit-ampm-field{}input::-webkit-datetime-edit -day-field{}input::-webkit-datetime-edit-hour -field{}input::-webkit-datetime-edit-millisecond-field{}input::-webkit-datetime-edit-minute-field{}input::-webkit-datetime-edit-month-field{}input ::-webkit-datetime-edit-second-field{}entrée : :-webkit-datetime-edit-week-field{}input::-webkit-datetime-edit-year-field{}input::-webkit-datetime-edit-ampm-field:focus{}input::-webkit -datetime-edit-day-field:focus{}input::-webkit-dateti me-edit-hour-field:focus{}input::-webkit-datetime-edit-millisecond-field:focus{}input::-webkit-datetime-edit-minute-field:focus{}input::-webkit -datetime-edit-month-field:focus{}input::-webki t-datetime-edit-second-field:focus{}input::-webkit-datetime-edit-week-field:focus{}input::-webkit-datetime-edit-year-field:focus{}input :: -webkit-datetime-edit-year-field[disabled]{}input::- webkit-datetime-edit-month-field[disabled]{}input::-webkit-datetime-edit-week-field[disabled]{}input::-webkit-datetime-edit-day-field[disabled]{} input::-webkit-datetime-edit-ampm-field[désactiver led]{}input::-webkit-datetime-edit-hour-field[disabled]{}input::-webkit-datetime-edit-millisecond-field[disabled]{}input::-webkit-datetime-edit- champ-minute[désactivé]{}input::-webkit-datetim e-edit-second-field[disabled]{}input::-webkit-datetime-edit-text{}input::-webkit-inner-spin-button{}input::-webkit-calendar-picker-indicator{ }input::-webkit-calendar-picker-indicator:hover{}

Le petit triangle qui modifie la hauteur des lignes et la hauteur du type de date ne s'ajustera pas en fonction de la taille. Il est vraiment moche, j'ai donc décidé de le cacher.

Le CSS suivant peut supprimer les triangles supérieur et inférieur de la date, mais conserver le petit triangle dont le type d'entrée est un nombre.

 input[type=date]::-webkit-inner-spin-button { visibilité : caché }

La zone de saisie dont le type de saisie est date possède les attributs suivants, qui peuvent être ajustés en fonction de vos propres besoins.

 ::-webkit-datetime-edit { padding: 1px; background: url(../selection.gif); }::-webkit-datetime-edit-fields-wrapper { background-color: #eee }::- webkit-datetime-edit-text { couleur : #4D90FE ; remplissage : 0 .3em }::-webkit-datetime-edit-year-field {; couleur : violet ; }::-webkit-datetime-edit-month-field { couleur : bleu }::-webkit-datetime-edit-day-field { couleur : vert }::-webkit-inner-spin- bouton { visibilité : caché } ::-webkit-calendar-picker-indicator {border : 1px solid #ccc ;border-radius : 2px;box-shadow : encart 0 1px #fff, 0 1px #eee;couleur d'arrière-plan : #eee;image d'arrière-plan : -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);couleur : #666;}

Ce qui précède est la méthode que l'éditeur vous présente pour supprimer le style par défaut du type de saisie date en HTML5. J'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message et l'éditeur vous répondra. dans le temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !