Buttons als Auswahl

[Camping_RIDER]

Aloha ;)

Ich sage nicht, dass du das sollst. Möglich wär’s aber. Siehe Beispiel.

Zur Erklärung:

• Eine Gruppe von Radiobuttons gehört in ein fieldset (mit einer Beschriftung legend).
• Mit :checked + label kann man das Label des gedrückten Radiobuttons anders stylen (wenn im DOM das label-Element dem input-Element folgt).
• Nicht vergessen, für die Tastaturbedienung einen Stil für :focus + label zu setzen!
• Damit sich die Stile nicht überall auswirken, sind sie nur für das Formular #band gültig.

Humm-Homm. Du hast Recht, was den Stil für :focus angeht - der sollte gesetzt werden.

Allerdings meiner Meinung nach auf keinen Fall so, wie du das im Beispiel gemacht hast! Du setzt die :focus-Markierung hier so ein wie bei richtigen Buttons und erzeugst damit beim Benutzer die Erwartung, er könne jetzt mit Tab durch die Buttons gehen und mit Enter einen „auswählen“. Versuch das mal - es wird nicht funktionieren. Und zwar, weil es ja eigentlich Radiobuttons sind und Radiobuttons werden (zumindest in meinem Chrome) anders mit der Tastatur bedient: mit den Pfeiltasten, und Tab nur um den aktuell angewählten Radiobutton von außen anzuspringen. Es ist also eine andere Form der :focus-Markierung angebracht, die den User darauf stößt, Pfeiltasten zu verwenden. Zum Beispiel durch Pfeile via :focus:checked + label::after und :focus:checked + label::before. So wird dem Nutzer eher klar, welche Form von Tastatureingabe hier von ihm erwartet wird. Wobei das :checked hier streng genommen überflüssig ist, weil ein Radio-Button mit :focus immer gleichzeitig :checked ist!

Außerdem sollte nicht nur :focus, sondern auch :hover mit einem Hervorhebungsstil versehen werden, um beim darüberfahren mit einer Maus die Interaktivität hervorzuheben. Aus demselben Grund sollte auch cursor:pointer eingesetzt werden.

Du erkennt das Problem? Wie beatovich eben schon sagte, suggerieren die als Buttons gestylten Labels keine Auswahl, sondern eine Aktion (was Buttons ja üblicherweise auslösen). Die Nutzer kommen womöglich gar nicht auf die Idee, dass sie noch den Submit-Button „switch“ drücken müssen.

Was willst du eigentlich haben? Am Ende gar mehrere Submit-Buttons?

Ich glaube der TO sucht eigentlich was anderes als er denkt. Ich glaube er sucht ein Auswahl-Instrument, das funktioniert wie Radio-Buttons, aber einen peppigeren/interaktiveren Stil hat. Meine Glaskugel denkt, dass es beim Wunsch nach „Buttons“ nicht wirklich um Buttons ging, sondern mehr um sowas wie „Schalter“.

Ich hab mir mal den Spaß erlaubt, dein Pen zu forken und was zu basteln, was eher dem entspricht, wovon ich glaube, dass der TO es sucht. Wenn man sich mehrere davon in einem Formular vorstellt wird es auch sehr plausibel, nach dem eigentlichen Submit-Button als „speichern“ zu suchen. Insbesondere besteht keine Verwechslungsgefahr mit richtigen Buttons, der Auswahl-Charakter tritt in den Vordergrund.

Man beachte dabei die Art, in der ich :focus markiere - die Pfeile sind genau dann sichtbar, wenn die Elemente mit Pfeiltasten bedienbar sind (sie beziehen sich dann auch deutlich sichtbar auf das gesamte intraktive Element, so dass beim User keine Versuchung aufkommt, mit der Tabtaste durchschalten zu wollen), und insbesondere sind die Hervorhebungen für :focus und :hover deutlich voneinander verschieden.

Grüße,

RIDER