This week's book giveaway is in the JavaScript forum.
We're giving away four copies of Svelte and Sapper in Action and have Mark Volkmann on-line!
See this thread for details.
Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • 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 all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

How create radiobuttons connected by horizontal lines?

 
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
  • 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
 
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • 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.
 
Sheriff
Posts: 4885
317
IntelliJ IDE Python Java Linux
  • Mark post as helpful
  • send pies
  • 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.
 
Straws are for suckers. Now suck on this tiny ad!
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
    Bookmark Topic Watch Topic
  • New Topic