Question

I’m trying to make a system which asks users to specify what kind of content they are submitting, using PNG icons to represent each type. Ideally, what I’d like is a group of three buttons (with images on them) which behave like radio buttons – the user can use arrow keys to switch between them, they are treated as one group, etcetera. However, that appears to be impossible, and the closest I can get is putting the images alongside the pre-existing radio buttons. Is there a good way to ‘fake’ this functionality?

Answer 1

I would suggest using radio buttons as a user will recognise these inputs and it’ll work without javascript.

<form> <input type='radio' name='sex' value='male' id='male'/><label for='male'>Male</label> <br /> <input type='radio' name='sex' value='female' id='female' /> <label for='female'>Female</label> </form> 

You can then put an image inside the labels, or better, a background image to supplement the text.