Formular Tastatursteuerung Sichtbarkeit

[MrMurphy1]

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

http://kurokami.bplaced.net/

bereitgestellt.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@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 🖖

[MrMurphy1]

Hallo,

ich weiß nicht wie ich das praktisch umsetzen kann.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@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 🖖

[MrMurphy1]

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

[JürgenB]

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

[Gunnar Bittersmann]

@@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 🖖

[Matthias Apsel]

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