How create radiobuttons connected by horizontal lines?

Hello,

I require to use html, css, javascript to carry out the following:

1) create 3 radiobuttons positioned horizontally.
2) the radio buttons are to be connected by horizontal lines.
3) on selecting a radio button an event shall be activated to carry out some functionality.
4) the radio button labels are to be positioned below the radio buttons.
5) the html needs to be cross-browser compatible (mainly firefox, chrome).

Please can you advise on the html to be used to carry out this functionality?

kind regrds,
Simon

That's an unusual requirement. If I had to do it, I'd likely try positioning a div behind the radio buttons and use the bottom border to achieve the line. Getting it to line up perfectly with the center of the radio buttons, especially across all browsers, is likely to be, er, interesting.

Trying the same with an hr element might be another approach.

You could use a variation of this technique, W3Schools CSS Navbar, to get your radio buttons in a horizontal line.

Radio buttons support all DOM Object events, DOM Obj Events, which you can use to trigger some function.

The rest is just styling.