Wir haben gerade The Current State of Styling Selects in 2019 behandelt, aber wir sind bei weitem nicht so weit und so ausgefallen gekommen, wie Julie Grundy es hier tut. Es steckt eine ordentliche Portion JavaScript dahinter, daher behalte ich das jüngste Interesse der Browser, uns leistungsfähigere Select-Elemente (vermutlich) nur mit HTML und CSS zu geben, weiterhin sehr genau im Auge.
Ich habe einen Fork auf CodePen hinzugefügt, falls du einfach nur das Endergebnis sehen möchtest.
Sieh dir den Pen
Custom Select Input von Chris Coyier (@chriscoyier) an
auf CodePen.
Dies ist auch der erste Artikel in der Ausgabe 2019 von 24 Ways, dem langjährigen und wunderbaren jährlichen Adventskalender für Entwickler, der jedes Jahr lesenswert ist.
Das ist brillant. Eine Sache, die mir bei der Neuerstellung benutzerdefinierter Formularelemente immer Sorgen bereitet, ist die Auswirkung auf die Barrierefreiheit, aber dieses scheint tatsächlich sehr gut zu funktionieren. Der Elementtyp ist ordnungsgemäß im Accessibility Tree konstruiert (ich habe die neueste Version von Fx getestet) und wird wie erwartet von Screenreadern (NVDA, der derzeit beliebteste SR in Gebrauch) angekündigt. Selbst die gefilterte Kombinationsliste, die sich beim Tippen darunter aktualisiert, wird korrekt vorgelesen, mit der richtigen Anzahl von Elementen. Es wäre vielleicht sinnvoll, diese Funktion auf einem Mac mit VoiceOver zu testen, da meine Erfahrung ist, dass dieser SR manchmal mit benutzerdefinierten Elementen und dem Ankündigen des richtigen Inhalts zur richtigen Zeit durcheinanderkommt, aber ich habe gerade keinen zur Verfügung, um das zu testen.