Gunnar Bittersmann: Buttons als Auswahl

Beitrag lesen

@@Thomas

Dann soll ich da Radiobuttons einfügen und das Label dazu so stylen das es aussieht wie ein Button und den Radio-Button ggf. verstecken?

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.

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.

Nur mir dem <input type="button"> ist das was ich haben will also nicht möglich?

Nein.

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

LLAP 🖖

--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory