Improved appearance for checked cards

[Chris--S]

When a label is linked to a checkbox by nesting or for attribute the checkbox doesn't need to be visible - it is operated by clicking on the label.

If you structure the card html as

<input id="some-id" type="checkbox" />
<label for="some-id"> <!-- card html/content --></label>

clicking the label will operate the checkbox and sibling selectors can be used to alter the appearance of the card.

[Chris--S]

Note, in iOS a label element isn't naturally touchable. The above may need something additional to tell iOS safari that the label should respond to touches. Adding an empty onclick attribute is sufficient, e.g. onclick="". There maybe other triggers that achieve the same thing.