Boxen umsetzten

[Rolf B]

Hallo Bernd,

Kann man dann auch mit dem Checkbox Trick arbeiten?

Sorry, übersehen.

Müsste gehen, wenn man

• den Radiobuttons ein Label gibt
• erst die Buttons, dann die Label ins HTML setzt (und zwar immer abwechselnd radio/label/radio/label)
• die Radiobuttons visuell versteckt und per CSS dafür sorgt, dass ein radiobutton im checked-Status das auf ihn folgende Label entsprechend darstellt. Und bei :hover/:focus das Label ein Outline bekommt
• Im Label Icon und Text anzeigt

Aber das ist ein HACK, das sollte besser mit JavaScript gemacht werden. Soweit ich weiß, haben diese Hacks Accessibility-Probleme. Meine Beispiele hier nehmen nur auf die Darstellung Bezug, das Thema Bedienbarkeit habe ich zurückgestellt. Das solltest Du für deine Seiten nicht tun.

Das Problem bei diesen Hacks ist, dass die Buttons und das davon kontrollierte Element Kinder des gleichen Elternelements sein müssen. Das macht das Layouting gelegentlich schwierig. Sowas hier würde den Hack kaputt machen:

<div class="viewbuttons">
<input type="radio" value="cardview" id="cardview"><label for="cardview">☰ Rasteransicht</label>
</div>
<section class="galerie">
...
</section>

Rolf