Gunnar Bittersmann: HTML Quiz auswerten

Beitrag lesen

@@Rolf B

… und gibst den <li> einen list-style-type: upper-latin, dann nummeriert er Dir die Antworten automatisch mit A-D durch. Allerdings dann links vom Radiobutton. Das KANN man lösen, ist aber ein bisschen CSS Hexerei.

Ach was Hexerei – nicht dafür. Das ist einfach erledigt, indem man die Radiobuttons absolut links im li positioniert (was dazu relativ positioniert sein muss).

Sieht dann so aus: ⦿ A. foo

Das Problem daran ist, dass der Marker „A.“ nicht anclickbar ist, sondern nur der Radiobutton links davon und das Label rechts davon. Lässt sich aber auch einfach mit einem label::after-Pseudoelement lösen, das absolut positioniert die gesamte li-Box ausfüllt. Selber Trick wie bei Ein ganzes Tabellenfeld als Link.

Guckst du.

LLAP 🖖

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