5.2.4 #permalink input-blockLabel
Style a radio array as a grid of images. Hide the input
with grid-0
, and let this css style the label
. Includes hover and selected states. Should be a11y-friendly.
Example
Markup
<div class="grid-parent">
<input
class="grid-0 input-blockLabel"
type="radio"
name="giftcardDesignsId"
value="211"
id="211"
required
/>
<label for="211" class="grid-4 box_padded2 input-blockLabel-label">
<img class="img-cover" src="/img/giftCards/2015/orange_thumbnail.png" alt="Orange"/>
</label>
<input
class="grid-0 input-blockLabel"
type="radio"
name="giftcardDesignsId"
value="212"
id="212"
required
checked="checked"
/>
<label for="212" class="grid-4 box_padded2 input-blockLabel-label">
<img class="img-cover" src="/img/giftCards/2015/map_thumbnail.png" alt="Map"/>
</label>
<input
class="grid-0 input-blockLabel"
type="radio"
name="giftcardDesignsId"
value="213"
id="213"
required
/>
<label for="213" class="grid-4 box_padded2 input-blockLabel-label">
<img class="img-cover" src="/img/giftCards/2015/youre_awesome_thumbnail.png" alt="You're Awesome"/>
</label>
</div>
Source:
modules/05_user_interface/forms_ext.less
, line 158