Constraints breed innovation? This seems to be frequently the case in the world of HTML e-mail. Despite a rocky landscape of restrictions people have acheived some incredible things. I was surprised however today to get an interactive email from Dominos where you can click to see different images in a tab like interface.

Digging into view source I could see the usage was achieved using a <label> element with a <input type="radio"> inside it. Once the input is checked (via clicking the label) the adjacent CSS selector(+) is used to change the styling of the image.

This technique isn’t actually new, radio buttons have been a commonly used trick for behaviour without Javascript - known as “checkbox hack”. Famously used for a HTML + CSS version of Minesweeper.

Since forms are available in e-mails and many clients support modern CSS it makes sense this works, however this is the first time I’ve seen it. I found a couple of other examples searching the web.

Nice work Dominos 👏