Es gab einige ästhetische Änderungen an Formularelementen seit Chrome 83. Alles mit Farbverläufen ist verschwunden (insbesondere die extra-glänzenden <meter>-Elemente). Die durchgängige Konsistenz ist schön, besonders zwischen Eingabefeldern und Textbereichen. Kein großer Fan des neuen <select>-Stylings, aber ich höre, dass viel Forschung zur Barrierefreiheit darin eingeflossen ist, daher ist es schwer, sich zu beschweren – außerdem kann man es immer ändern.
Hakim hat einen schönen Vergleichs-Tweet
Chromes neue standardmäßige Formularstile sind da 👀 pic.twitter.com/Pr6qi1LpPn
— Hakim El Hattab (@hakimel) 26. Mai 2020
Dies wird nicht von neuen standardisierten Möglichkeiten begleitet, das Aussehen von Formularelementen mit CSS zu ändern, obwohl Browser sich dessen sehr bewusst sind und sich dem Ziel immer nähern. Ich glaube, dies war ein Schritt auf diesem Weg.
Ich sehe auch, dass es ein neues <input type="time"> gibt. Die alte Version sah so aus und bot keine UI-Steuerelemente
Jetzt bekommen wir dieses Biest mit Steuerelementen
Reddit bemerkt, dass es dasselbe Pseudoelement verwendet, das auch Datumsauswahlen verwenden. Wenn Sie es also loswerden möchten, können Sie es auf diese Arten von Eingaben beschränken (oder nicht) und entfernen.
input[type="time"]::-webkit-calendar-picker-indicator {
display: none;
}Ich würde es als Verbesserung bezeichnen (ich mag UI-Steuerelemente für Dinge), aber es unterstreicht weiterhin die Notwendigkeit, diese Dinge gestalten zu können, insbesondere wenn das Ziel ist, dass die Leute sie tatsächlich benutzen und nicht (schlecht) neu erstellen.
Beim Fokussieren eines Elements wird nun eine dicke schwarze Umrandung angezeigt, die hässlich aussieht.
Ich mag es auch nicht. Die alte orange Farbe war in Ordnung, weil sie auffiel (und die Leute daran gewöhnt waren).
Ich dachte ursprünglich, das sei ein Problem mit meinen Stilen...
Ich denke, als Meinung ist das in Ordnung. Ich persönlich mag es, obwohl ich vollkommen verstehe, dass einige das vielleicht nicht tun.
Ich denke auch unter dem Gesichtspunkt der Barrierefreiheit ist dies ein anständiger Ausgangspunkt; und erforscht von Microsoft, die dazu beigetragen haben, glaube ich.
Abgesehen davon kann es auch überraschend und unerwartet sein, wenn Ihre Website ein anderes Thema hat. Zum Beispiel kollidiert bei der Eingabe dieses Kommentars auf css-tricks.com mit Chrome die blaue Farbe für die Kontrollkästchen für die Kommentarabonnementoptionen vollständig mit dem dunklen/orangen Thema, und soweit ich weiß, gibt es keine Möglichkeit in CSS, das tatsächliche native Steuerelement selbst zu ändern (ohne weitere Substitutions-Tricks, die für größere Websites möglicherweise nicht einfach sind).
Abgesehen von den Kontrollkästchen/Radio-Buttons denke ich, dass der Fokusstil in CSS geändert werden kann, und für einige Websites werde ich ihn so belassen, wie er ist, denke ich.
Schöner Artikel. Ich bin kein großer Fan von der neuen Select-Box.
Kurzer Hinweis: Sie können hier alle HTML-Elemente visualisieren.
https://devansvd.github.io/html-elements/
Danke für den Artikel. Ich denke, die allgemeinen Verbesserungen der Barrierefreiheit sind großartig. Ich glaube, es begann mit Beiträgen von Microsoft? In Edge sind die Radio-/Checkbox-Stile schwarz, aber in Chrome blau, was leider mit einigen Website-Themes kollidieren kann, und wenn ich mich nicht irre, ist der native Stil nicht einfach zu ändern? Ich verstehe, dass man die native Checkbox oder das Radio ausblenden und ein Symbol oder etwas anderes mit dem angekreuzten Selektor verwenden kann, aber das kann schwer nachträglich in große, formularlastige Apps integriert werden.
Abseits des Themas: Dieser Vergleichs-Slider-Block ist sicherlich hilfreich, wenn man sehr ähnliche Dinge vergleichen möchte, z. B. Bilder mit unterschiedlichen Qualitätseinstellungen. In diesem Fall erschwert er den Vergleich erheblich.
Der Schieberegler ist bei weißem Hintergrund nicht leicht zu erkennen, man kann nicht leicht erkennen, welche Formularelemente zu welcher Chrome-Version gehören, und man sieht nie beide Versionen gleichzeitig.
Ein einfaches Bild, das beide Versionen nebeneinander zeigt, hätte eine bessere Arbeit geleistet. Entschuldigung, wenn das harsch oder unfreundlich klingt. Ich verstehe, Sie wollten nur damit spielen.
Ich liebe den Wisch-Vergleichsblock! Endlich ein Grund, den Komfort meines RSS-Readers zu verlassen.
Warum ein Standardkalender? Warum?
Hallo, wie können wir den neuen unteren Teil der Eingabebereich-Komponente jetzt gestalten?
Danke