Tips for connecting radio buttons with a line

Question

Tips for connecting radio buttons with a line

I have been working hard to implement the design shown in the image below using HTML and CSS. Here is what I have accomplished so far.

https://i.sstatic.net/q2DHa.png

.slider{
  display: flex;
  margin: 0 auto;
  text-align: center;
  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10rem;
    
  }

<ul class="slider">
          <li class="slider-item">
            <label for="f-option">In Depth Knowledge</label>
            <input type="radio" id="f-option">
          </li>
          <li class="slider-item">
            <label for="g-option">Exellence & Education</label>
            <input type="radio" id="g-option">
          </li>
          <li class="slider-item">
            <label for="k-option">In Depth Knowledge</label>
            <input type="radio" id="k-option">
          </li>
        </ul>

html css bootstrap-4

Answer 1

Answer №1

Here is the code snippet to achieve the desired layout:

Use the following code:

Apply li{flex: 0 1 33%;} for the list items and use pseudo as :after for styling lines.

Check out the working example on JSFiddle

NOTE:

To allow the user to select only one radio button, use the name attribute.

    .slider {
      display: flex;
      margin: 0 auto;
    }

    label {
      width: 80px;
      display: block;
    }

    input {
      margin-left: 30px;
      margin-right: -1px;
    }

    li {
      flex: 0 1 33%;
      list-style: none;
      position: relative;
    }

    li:not(:last-child):after {
      content: "";
      position: absolute;
      height: 1px;
      width: 100%;
      background: black;
      top: 45px;
    }

<ul class="slider">
  <li class="slider-item">
    <label for="f-option">In Depth Knowledge</label>
    <input type="radio" id="f-option" name="rb">
  </li>
  <li class="slider-item">
    <label for="g-option">Excellence & Education</label>
    <input type="radio" id="g-option" name="rb">
  </li>
  <li class="slider-item">
    <label for="k-option">In Depth Knowledge</label>
    <input type="radio" id="k-option" name="rb">
  </li>
</ul>

Answer 2

Here is the code snippet to achieve the desired layout:

Use the following code:

Apply li{flex: 0 1 33%;} for the list items and use pseudo as :after for styling lines.

Check out the working example on JSFiddle

NOTE:

To allow the user to select only one radio button, use the name attribute.

    .slider {
      display: flex;
      margin: 0 auto;
    }

    label {
      width: 80px;
      display: block;
    }

    input {
      margin-left: 30px;
      margin-right: -1px;
    }

    li {
      flex: 0 1 33%;
      list-style: none;
      position: relative;
    }

    li:not(:last-child):after {
      content: "";
      position: absolute;
      height: 1px;
      width: 100%;
      background: black;
      top: 45px;
    }

<ul class="slider">
  <li class="slider-item">
    <label for="f-option">In Depth Knowledge</label>
    <input type="radio" id="f-option" name="rb">
  </li>
  <li class="slider-item">
    <label for="g-option">Excellence & Education</label>
    <input type="radio" id="g-option" name="rb">
  </li>
  <li class="slider-item">
    <label for="k-option">In Depth Knowledge</label>
    <input type="radio" id="k-option" name="rb">
  </li>
</ul>

Tips for connecting radio buttons with a line

Answer №1

Similar questions

What is the best way to implement a hover effect on each direct child individually using CSS?

Element on webpage "Expands" When Scrolled into Visibility

Styling Fonts in Safari with CSS

Tips for limiting the size of image uploads to under 2 megabytes

Is it possible for me to set my HTML body class as ".body" in CSS?

Dynamic font size that adjusts as you change the window dimensions

Update the content retrieved through ajax periodically

Tips on updating the content of an HTML element dynamically when it is already being populated using *ngFor

I am experiencing issues with the functionality of the Search Button in my code

Encountering an issue trying to insert multiple objects into a Laravel session

Bring in the SCSS directory from the overarching SCSS program

Adaptable Navigation

Loop through the input template using ng-repeat with various data types

Utilizing Wordpress for Effective Internal Linking

Creating a Background Cutout Effect with CSS Using Elements instead of Images

Learn the process of using calc to rotate images on hover with CSS and Jquery

How can I retrieve a list of downloads utilizing the Chrome.downloads api?

Unable to use .click function to choose image within container

Is it possible to style a nested ID with CSS?

The onClick event is not functioning properly with React's select and option elements