HTML Button Group that has identical behaviour to Radio Buttons

Question

What is the best approach to define a group of buttons in HTML and have them behave identically to radio buttons - so button selection is mutually exclusive.

The buttons will be 60x60 with rounded corners, have an image centered and a label below the button.

Cheers.

The best approach is to use radio buttons. (If you MUST do custom elements, style the labels to look like your buttons.) — Mathletics, Feb 14 '14 at 15:53

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

If you want behavior like radio buttons, use radio buttons and change their appearance to what you want.

Here is a post outlining how to replace the default radio buttons with images of your choice: How to replace replace radio buttons with images?

edited May 23 '17 at 12:20

Community

1
1

answered Feb 14 '14 at 15:28

mayabelle

9,496
8
35
59

Thanks for the post I appreciate it. – user3034151 Feb 14 '14 at 21:48

score 0 · Answer 2 · answered Feb 14 '14 at 15:52

0

You have to use radio buttons and then customize them with css.

I advise you these guides:

answered Feb 14 '14 at 15:52

fabio_vac

564
1
6
13

I prefer the CSS approach and found the links very helpful. Thanks. – user3034151 Feb 14 '14 at 21:48
Your welcome, up vote please :) – fabio_vac Feb 15 '14 at 11:07
I will as soon as I have enough reputation - i'm currently one short. – user3034151 Feb 15 '14 at 20:00

HTML Button Group that has identical behaviour to Radio Buttons

2 Answers2