So ändern Sie den Datumsstil in HTML

In HTML können Sie den Pseudoelementselektor „::-webkit-datetime-edit“ verwenden, um das Datumsformat zu ändern. Sie müssen diesen Selektor nur verwenden, um das Element auszuwählen und den spezifischen Stil festzulegen „::- webkit-datetime-edit{property:property value}“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Art der Zeitauswahl:

Datum auswählen:

Zeit auswählen:

Woche auswählen:

Monat auswählen:

Ändern Sie den Stil von Datum und Uhrzeit control

Derzeit gibt es unter WebKit die folgenden 9 Pseudoelemente, die die Benutzeroberfläche der Datumssteuerung ändern können:

::-webkit-datetime-edit – Steuern Sie den Bearbeitungsbereich

::-webkit-datetime-edit -fields-wrapper – Jahr, Monat und Tag steuern Der

::-webkit-datetime-edit-text dieses Bereichs – Dies ist der Schrägstrich oder Bindestrich, der Jahr, Monat und Tag steuert -datetime-edit-month-field – Der Monat wird gesteuert

::-webkit-datetime-edit-day-field – Steuern Sie den spezifischen Tag

::-webkit-datetime-edit-year-field – Steuern Sie das Jahr Text, wie zum Beispiel der Platz, der von den vier Buchstaben von 2017 eingenommen wird

:: -webkit-inner-spin-button – Dies dient zur Steuerung der Auf- und Abwärtspfeile

::-webkit-calendar-picker-indicator – Dies ist um den Dropdown-Pfeil zu steuern

::-webkit-clear-button – Dies dient zur Steuerung des folgenden

clear-Buttons, der die Pseudoelemente enthält, die für Datum, Datum/Uhrzeit, Woche und Uhrzeit verwendet werden:

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

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

Das kleine Dreieck, das die Zeilenhöhe ändert und Die Höhe des Datumstyps passt sich nicht an die Größe an. Es ist zu hässlich, deshalb habe ich beschlossen, es auszublenden.

Das folgende CSS kann die kleinen oberen und unteren Dreiecke im Datum entfernen, behält aber das kleine Dreieck bei, dessen Eingabetyp Zahl ist.

input[type=date]::-webkit-inner-spin-button { sichtbarkeit: versteckt; }

Das Eingabefeld mit dem Eingabetyp Datum verfügt über die folgenden Attribute, die nach Ihren eigenen Bedürfnissen angepasst werden können.

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

Empfohlenes Lernen:

HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Datumsstil in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!