• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Devaka Cooray
  • Campbell Ritchie
  • Tim Cooke
  • Ron McLeod
  • Paul Clapham
Sheriffs:
  • Liutauras Vilda
  • Jeanne Boyarsky
  • paul wheaton
Saloon Keepers:
  • Tim Holloway
Bartenders:

How create radiobuttons connected by horizontal lines?

 
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Sheriff
Posts: 67759
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Marshal
Posts: 6208
501
IntelliJ IDE Python TypeScript Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
They weren't very bright, but they were very, very big. Ad contrast:
The new gardening playing cards kickstarter is now live!
https://www.kickstarter.com/projects/paulwheaton/garden-cards
reply
    Bookmark Topic Watch Topic
  • New Topic