Comment modifier le style de date en HTML

En HTML, vous pouvez utiliser le sélecteur de pseudo-éléments "::-webkit-datetime-edit" pour modifier le format de date. Il vous suffit d'utiliser ce sélecteur pour sélectionner l'élément et définir le style spécifique. La syntaxe spécifique est : "::-webkit-datetime-edit{property:property-value}".

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Type de sélection d'heure :

Sélectionner la date : Heure :

Sélectionner la semaine : ;input type="month" />

Modifier 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 de la date control:

::-webkit-datetime-edit -

qui contrôle la zone d'édition

::-webkit-datetime-edit-fields-wrapper -

::- qui contrôle la zone année, mois et jour webkit-datetime-edit-text – Ceci contrôle la barre oblique ou le tiret entre l'année, le mois et le jour

::-webkit-datetime-edit-month-field – contrôle la zone mois

::-webkit-datetime-edit-day-field - Contrôler le jour spécifique

::-webkit-datetime-edit-year-field - Contrôler le texte de l'année, tel que l'espace occupé par les quatre lettres de 2017

::-webkit-inner-spin-button – C'est celui qui contrôle les flèches haut et bas

::-webkit-calendar- picker-indicator – C'est celui qui contrôle la petite flèche déroulante

::-webkit-clear-button – C'est le bouton d'effacement du contrôle

Les éléments suivants incluent les pseudo-éléments utilisés pour date, dateheure, semaine, 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{}

entrée : :-webkit-datetime-edit-millisecond-field{}

entrée ::-webkit-datetime-edit-minute-field {}

input::-webkit-datetime-edit-month-field{}

input::-webkit-datetime-edit-second-field{}

input::-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-datetime-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::-webkit-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[disabled]{}

input::-webkit-datetime-edit-hour-field[disabled]{}

input::-webkit-datetime -edit-millisecond-field[disabled]{}

input ::-webkit-datetime-edit-minute-field[disabled]{}

input::-webkit-datetime-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 type de date modifie la hauteur de la ligne et la hauteur. Le petit triangle ne s'ajuste pas en fonction de la taille. Il est vraiment moche, alors j'ai décidé de le cacher.

Le CSS suivant peut supprimer les petits triangles supérieurs et inférieurs 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 avec le type de saisie date a les attributs suivants, qui peuvent être personnalisés selon vos besoins Ajustez-vous.

      ::-webkit-datetime-edit {
        padding: 1px;
        background: url(../selection.gif);
      }
      ::-webkit-datetime-edit-fields-wrapper {
        background-color: #eee;
      }
      ::-webkit-datetime-edit-text {
        color: #4d90fe;
        padding: 0 0.3em;
      }
      ::-webkit-datetime-edit-year-field {
        color: purple;
      }

      ::-webkit-datetime-edit-month-field {
        color: blue;
      }

      ::-webkit-datetime-edit-day-field {
        color: green;
      }

      ::-webkit-inner-spin-button {
        visibility: hidden;
      }

      ::-webkit-calendar-picker-indicator {
        border: 1px solid #ccc;
        border-radius: 2px;
        box-shadow: inset 0 1px #fff, 0 1px #eee;
        background-color: #eee;
        background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);
        color: #666;
      }

Apprentissage recommandé :

Tutoriel vidéo HTML

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!