Formular Tastatursteuerung Sichtbarkeit
MrMurphy1
- barrierefreiheit
Hallo,
wie können input-Felder der Typen "checked" und "radio" mit einer Hintergrundfarbe versehen werden, wenn sie mit der Tastatur ausgewählt wurden? Beim Firefox können die einzelnen Formularfelder mit der Tabulator-Taste "angesprungen" und dann aktiviert werden. Ich bekomme es nicht hin, dass das grade aktive Feld mit einer anderen Hintergrundfarbe auch sichtbar gemacht wird.
Die Felder "text" und "select & multiple" dienen als positive Kontrolle, da sie wie vom mir erwartet funktionieren.
Eine Testseite habe ich unter
bereitgestellt.
Gruss
MrMurphy
@@MrMurphy1
wie können input-Felder der Typen "checked" und "radio"
"checkbox" bestimmt
mit einer Hintergrundfarbe versehen werden, wenn sie mit der Tastatur ausgewählt wurden?
Da fielen mir Filter ein. Mit sepia()
aus Weiß einen Farbton machen, die Farbe, Sättigung und Helligkeit kannst du dann ändern.
LLAP 🖖
Hallo,
ich weiß nicht wie ich das praktisch umsetzen kann.
Gruss
MrMurphy
@@MrMurphy1
ich weiß nicht wie ich das praktisch umsetzen kann.
[type="checkbox]:focus { filter: sepia(100%) hue-rotate(70deg) saturate(10000%) brightness(70%) }
ergibt grün.
Allerdings sind angehakte und nicht angehakte Checkboxen nicht zu unterscheiden. Du müsstest getrennte Werte für [type="checkbox]:not(:checked):focus
und [type="checkbox]:checked:focus
vorsehen.
LLAP 🖖
Hallo,
danke für deine Mühe, aber ich suche nach der Möglichkeit eine Hintergrundfarbe bei checkbox und radio zu setzen. Das wäre deutlich besser zu erkennen und würde auch zum gesamten Formular passen. Vielleicht kennt jemand daür eine Lösung.
Gruss
MrMurphy
Hallo,
danke für deine Mühe, aber ich suche nach der Möglichkeit eine Hintergrundfarbe bei checkbox und radio zu setzen. Das wäre deutlich besser zu erkennen und würde auch zum gesamten Formular passen. Vielleicht kennt jemand daür eine Lösung.
nur eine Idee: mit ::befor oder ::after ein Element mit Hintergrund erzeugen und entsprechend positionieren.
Gruß Jürgen
@@JürgenB
nur eine Idee: mit ::befor oder ::after ein Element mit Hintergrund erzeugen und entsprechend positionieren.
input
ist ein ersetztes Element und kann deshalb keinen per Pseudoelement generierten Inhalt haben.
LLAP 🖖
Hallo MrMurphy1,
danke für deine Mühe, aber ich suche nach der Möglichkeit eine Hintergrundfarbe bei checkbox und radio zu setzen. Das wäre deutlich besser zu erkennen und würde auch zum gesamten Formular passen. Vielleicht kennt jemand daür eine Lösung.
input-Elemente sperren sich ein wenig gegen CSS. Das ist (wahrscheinlich) gewolltes Verhalten. Siehe auch Wiki/Buttons mit CSS gestalten. Lies bitte pro und contra.
Du könntest also Checkboxen mit JS nachbauen. Das ist aber überhaupt keine gute Idee weil, ach das schreibt dir der @Gunnar Bittersmann.
Du hast aber noch mehr Elemente die sich missbrauchen lassen, z.B. label, wenn du es im Markup nach dem input notierst (for
in diesem Fall nicht vergessen.)
input + label::before
könnte die gewünschte Gestaltung liefern.
Bis demnächst
Matthias