Known-Issue um Stylebarkeit von select- und option-Tag ist Browser- und OS-spezifisch

[deleonio]

Das Stylen der option-Tag hinsichtlich dessen Status (ausgewählt, fokussiert, aktive usw.) vom select-Tag ist leider nicht möglich. Deshalb ist es nicht möglich, das semantisch korrekte Element select vollständig barrierefrei zu machen und die erforderlichen Kontraste einzuhalten.
Eine kleine Optimierung haben wir gefunden, indem man einen Marker links anbringt, der auch bei schmalem Bildschirm immer sichtbar ist.

• Ausführliche Beschreibung wird in Know-Issue eingefügt.
• Es wird im Stackblitz ein Beispiel native aufgebaut und mit Farben versucht werden, zu zeigen, dass es nicht geht. Das Beispiel wird dann in der Known-Issue-Liste verlinkt.
• Optimierung in Basisstyle für alle übernhemen

Kleine Vorlage (nicht vollständig):

select {
  background: red;
}
select:selected {
  background: green;
}
option {
  background-color: #fff;  /* Hintergrundfarbe */
  color: #333;             /* Textfarbe */
  font-size: 14px;         /* Schriftgröße */
}
option:hover {
  background-color: #f0f0f0;  /* Hover-Effekt funktioniert nicht in allen Browsern */
}
option:active,
option:checked,
option:selected {
  background-color: #007bff;  /* Hintergrundfarbe für die ausgewählte Option */
  color: white;               /* Textfarbe für die ausgewählte Option */
}

Es gibt eine Optimierung, die ich eben gefunden habe: openui/open-ui#863

/* funktioniert*/
option:checked::before {
  content: "✓ "
}
/* cooler, funktioniert aber nicht */
option:checked::marker {
  content: "✓ "
}

[AlexanderSchmidtCE]

https://stackblitz.com/edit/vitejs-vite-nthnce?file=src%2Fstyle.css