So entfernen Sie den Standardstil des Eingabetyps „Datum“ in HTML5

So entfernen Sie den Standardstil des Eingabetyps „Datum“ in HTML5. Hier finden Sie eine detaillierte Einführung in diesen Artikel.

2. Ändern Sie den Stil des Datums- und Uhrzeitsteuerelements. Derzeit gibt es unter WebKit die folgenden 9 Pseudoelemente, die die Benutzeroberfläche des Datumssteuerelements ändern können:

 ::-webkit-datetime-edit – steuert den Bearbeitungsbereich. ::-webkit-datetime-edit-fields-wrapper – steuert den Jahres-, Monats- und Tagesbereich. ::-webkit-datetime-edit-text – steuert das Jahr, den Monat und Tag Ein Schrägstrich oder Bindestrich zwischen ::-webkit-datetime-edit-month-field – steuert den Monat::-webkit-datetime-edit-day-field – Steuern Sie den spezifischen Tag::-webkit-datetime-edit-year-field – steuern Sie den Jahrestext, z. B. den Bereich, der von den vier Buchstaben von 2017 eingenommen wird::-webkit-inner-spin-button – dies ist die Steuerung des kleine Pfeile nach oben und unten:: -webkit-calendar-picker-indicator – Dies steuert den Dropdown-Pfeil::-webkit-clear-button – Dies steuert die Schaltfläche zum Löschen

Das Folgende umfasst Pseudoelemente, die von 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{}Eingabe: :-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[disab led]{}input::-webkit-datetime-edit-hour-field[disabled]{}input::-webkit-datetime-edit-millisecond-field[disabled]{}input::-webkit-datetime-edit- minutenfeld[disabled]{}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{}

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

Das folgende CSS kann die 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, dessen Eingabetyp Datum ist, verfügt über die folgenden Attribute, die an Ihre eigenen Bedürfnisse angepasst werden können.

 ::-webkit-datetime-edit { padding: 1px; background: url(../selection.gif); webkit-datetime-edit-text { color: #4D90FE; padding: 0 .3em }::-webkit-datetime-edit-year-field { Farbe: lila; }::-webkit-datetime-edit-month-field { color: blue }::-webkit-datetime-edit-day-field { color: green }::-webkit-inner-spin- button { sichtbarkeit: versteckt; }::-webkit-calendar-picker-indicator {border: 1px solid #ccc;border-radius: 2px;box-shadow: inset 0 1px #fff, 0 1px #eee;Hintergrundfarbe: #eee;Hintergrundbild: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);Farbe: #666;}

Die obige Methode stellt Ihnen der Herausgeber vor, um den Standardstil des Eingabetyps „Datum“ in HTML5 zu entfernen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht rechtzeitig. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!