← All elements
<div class="g"><label class="c"><input type="radio" name="p" checked><b>Free</b><span>$0</span></label><label class="c"><input type="radio" name="p"><b>Pro</b><span>$9</span></label><label class="c"><input type="radio" name="p"><b>Team</b><span>$29</span></label></div>About this card
Radio inputs turned into big selectable cards, with :has() highlighting the one you picked.
How it works
Each choice is a label that wraps a hidden radio and some content. The parent uses :has(input:checked) to highlight the selected card with a different background, border and shadow, so no sibling trick or script is needed. Hover lifts the cards slightly with translateY.
Ways to customise it
- Add more cards by copying a label and keeping the same radio name.
- Change the checked background and shadow to restyle the selection.
- Set a fixed width instead of flex: 1 for cards that do not stretch.
Good to know
Because the radios are real, one choice is always selected and the arrow keys move between cards. :has() is supported in current browsers. Avoid relying on colour alone to show the selection.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.