CSS accent-color
Formulare mit CSS sind auch nach dem Auftritt von appearance: none ein Wespennest: Entweder alles so lassen wie es ist oder alle Formularelemente von Grund auf aufbauen (ein Loch ohne Boden).
Dagegen kommt accent-color ins Spiel: Nur wenige Zeilen einfachstes CSS färbt die schwierigen Kandidaten:
- input type="range"
- HTML progress
- input type="checkbox"
- input type="radio"
.accent input, .accent progress { accent-color: lime; }
Werte: auto, color, initial, inherit
Erblich ja
Am Rande: Nur Firefox beherrscht den Range-Slider.
Die Browser legen automatisch einen guten Kontrast der Accent-Farbe fest, so dass für accent-color keine unterschiedlichen Farben für Darkmode und Lightmode festgelegt werden müssen.
Eigentlich soll accent-color irgendwann einmal alle Elemente erreichen, aber zurzeit unterstützen die modernen Browser nur wenige Elemente. Die alten (Um)Wege müssen wohl noch eine Weile für ein konsistentes Styling unterstützt werden.