HTML Radio buttons like Bar Graphs and Corresponding Labels right bellow them like X-axis names

Question

I want to achieve HTML bars using radio buttons and also make their labels appear under x-axis. I also want to maintain the lock/unlock icons as shown in the code below. I have tried to look at these answers Creating interactive bar chart with only HTML and CSS and How to style a radio button to look like a regular Learn More Button But couldn't get the whole solution even after I tried. This is the code I have written and the expected results. When checked, the button color should change to green. I am using bootstrap. Someone assist me, please.

.team-bar {
         /*list-style-type:none;
         margin:25px 0 0 0;
         padding:0; */
    }

    .team-bar .teama {
        float: left;
        margin: 0;
        width: 150px;
        height: 350px;
        position:relative;
    }

    .team-bar .lock-unlock-img, .team-bar input {
        display: block;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
    }

    .team-bar input[type="radio"] {
        opacity:0.011;
        z-index:100;
    }

    /*.team-bar .checked{
        background:yellow;
    }*/

    .team-bar .lock-unlock-img {
         padding:5px;
         border:1px solid #CCC; 
         cursor:pointer;
        z-index:90;
    }

    .team-bar .lock-unlock-img:hover {
         background:#DDD;
    }

<!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="//adminlte.io/themes/v3/plugins/fontawesome-free/css/all.min.css">
   <!-- Theme style -->
  <link rel="stylesheet" href="//adminlte.io/themes/v3/dist/css/adminlte.min.css"> 
  
 <div class="container">
      <div class="row">
        <div class="team-bar">
            <div class="col-md-1 center teama" style="display: inline !important;">
                <div class="inner text-center">
                    <p class="radios" style="display: inline !important;">
                        <input id="radio" type="radio" class="radio-inline" value="" name="assetvalue">
                        <div class="lock-unlock-img">
                            <b class="float-left" alt="left"> <i class="fa fa-lock  text-danger"></i></b>
                            <b class="float-right" alt="left"> <i class="fa fa-unlock text-success"></i></b>
                        </div>
                        <label class="radio bg-primary1  text-center" for="radio" style="display: inline-block !important;"> Team 1</label>     
                    </p>
                </div>
            </div>
            <div class="col-md-1 center teama" style="display: inline !important;">
                <div class="inner text-center">
                    <p class="radios" style="display: inline !important;">
                        <input id="radio" type="radio" class="radio-inline" value="" name="assetvalue">
                        <div class="lock-unlock-img">
                            <b class="float-left" alt="left"> <i class="fa fa-lock  text-danger"></i></b>
                            <b class="float-right" alt="left"> <i class="fa fa-unlock text-success"></i></b>
                        </div>
                        <label class="radio bg-primary1  text-center" for="radio" style="display: inline-block !important;"> Team 2</label>     
                    </p>
                </div>
            </div>
            <div class="col-md-1 center teama btn-success" style="display: inline !important;">
                <div class="inner text-center">
                    <p class="radios" style="display: inline !important;">
                        <input id="radio" type="radio" class="radio-inline" value="" name="assetvalue">
                        <div class="lock-unlock-img">
                            <b class="float-left" alt="left"> <i class="fa fa-lock  text-danger"></i></b>
                            <b class="float-right" alt="left"> <i class="fa fa-unlock text-success"></i></b>
                        </div>
                        <label class="radio bg-primary1  text-center" for="radio" style="display: inline-block !important;"> Team 3</label>     
                    </p>
                </div>
            </div>
            <div class="col-md-1 center teama" style="display: inline !important;">
                <div class="inner text-center">
                    <p class="radios" style="display: inline !important;">
                        <input id="radio" type="radio" class="radio-inline" value="" name="assetvalue">
                        <div class="lock-unlock-img">
                            <b class="float-left" alt="left"> <i class="fa fa-lock  text-danger"></i></b>
                            <b class="float-right" alt="left"> <i class="fa fa-unlock text-success"></i></b>
                        </div>
                        <label class="radio bg-primary1  text-center" for="radio" style="display: inline-block !important;"> Team 4</label>     
                    </p>
                </div>
            </div>
            <div class="col-md-1 center teama" style="display: inline !important;">
                <div class="inner text-center">
                    <p class="radios" style="display: inline !important;">
                        <input id="radio" type="radio" class="radio-inline" value="" name="assetvalue">
                        <div class="lock-unlock-img">
                            <b class="float-left" alt="left"> <i class="fa fa-lock  text-danger"></i></b>
                            <b class="float-right" alt="left"> <i class="fa fa-unlock text-success"></i></b>
                        </div>
                        <label class="radio bg-primary1  text-center" for="radio" style="display: inline-block !important;"> Team 5</label>     
                    </p>
                </div>
            </div>
        </div>
      </div>
    </div>

Thatkookooguy · Accepted Answer · 2021-10-09T12:28:52.943

I created a style for each radio button to achieve what you want.

Each Radio Button

container: the label is used as the container in order to make the entire area clickable
element1: the input itself
element2: the icons line of each bar
element3: the bar colored rectangle
element4: the bar's label

I wasn't sure about the logic of the colors so I tried to keep it the same as in your image.

<label for="team1" class="bar">
  <input type="radio"
         id="team1"
         name="team"
         value="team1"
         checked
  >
  <div class="icons-bar">
    <i class="fa fa-lock  text-danger"></i>
    <i class="fa fa-unlock text-success"></i>
  </div>
  <div class="chart-value"></div>
  <div class="legend">Team 1</div>
</label>

Styling

Based on if the input is checked or not, I'm changing the bar's height. In my solution, I use the same height for all the bars, but this can be easily changed. just like how I defined colors for each bar, you can do the same for the bar's height based on the selected state.

The important part is using the ~ selector which is the Subsequent-sibling combinator

The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

input:checked ~ .chart-value {
  height: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #f5f5dc;
}

.kb-checkbox-as-chart {
  --chart-height: 250px;
  --chart-color1: hsl(141, 53%, 53%);
  --chart-color2: hsl(141, 53%, 53%);
  --chart-color3: hsl(141, 53%, 53%);
  --chart-color4: hsl(141, 53%, 53%);
  --chart-color5: hsl(141, 53%, 53%);
  --lock-color: hsl(348, 100%, 61%);
  --unlock-color: hsl(141, 53%, 53%);
  --unlock-selected-color: hsl(48, 100%, 67%);
  display: flex;
  height: var(--chart-height);
  padding-bottom: 1em;
  border: 1px solid grey;
}

.kb-checkbox-as-chart .bar {
  margin: 0 0.3em;
  padding: 0.5em 0.5em 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.kb-checkbox-as-chart .bar .legend {
  font-weight: bold;
}

.kb-checkbox-as-chart .bar .icons-bar {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  position: absolute;
  padding: 0.8em;
}

.kb-checkbox-as-chart .bar .icons-bar .fa-lock {
  color: var(--lock-color);
}

.kb-checkbox-as-chart .bar .icons-bar .fa-unlock {
  color: var(--unlock-color);
}

.kb-checkbox-as-chart .bar .chart-value {
  height: 20px;
  width: 95%;
  background: var(--chart-color1);
  transition: height 250ms;
}

.kb-checkbox-as-chart input:checked~.icons-bar .fa-unlock {
  color: var(--unlock-selected-color);
}

.kb-checkbox-as-chart input:checked~.chart-value {
  height: 100%;
}

.kb-checkbox-as-chart input#team2~.chart-value {
  background-color: var(--chart-color2);
}

.kb-checkbox-as-chart input#team3~.chart-value {
  background-color: var(--chart-color3);
}

.kb-checkbox-as-chart input#team4~.chart-value {
  background-color: var(--chart-color4);
}

.kb-checkbox-as-chart input#team5~.chart-value {
  background-color: var(--chart-color5);
}

.kb-checkbox-as-chart input[type=radio] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

<link href="https://pro.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
<div class="kb-checkbox-as-chart">
  <label for="team1" class="bar">
    <input type="radio" id="team1" name="team" value="team1"
           checked>
    <div class="icons-bar">
      <i class="fa fa-lock  text-danger"></i>
      <i class="fa fa-unlock text-success"></i>
    </div>
    <div class="chart-value"></div>
    <div class="legend">Team 1</div>
  </label>

  <label for="team2" class="bar">
    <input type="radio" id="team2" name="team" value="team2">
    <div class="icons-bar">
      <i class="fa fa-lock  text-danger"></i>
      <i class="fa fa-unlock text-success"></i>
    </div>
    <div class="chart-value"></div>
    <div class="legend">Team 2</div>
  </label>

  <label for="team3" class="bar">
    <input type="radio" id="team3" name="team" value="team3">
    <div class="icons-bar">
      <i class="fa fa-lock  text-danger"></i>
      <i class="fa fa-unlock text-success"></i>
    </div>
    <div class="chart-value"></div>
    <div class="legend">Team 3</div>
  </label>

  <label for="team4" class="bar">
    <input type="radio" id="team4" name="team" value="team4">
    <div class="icons-bar">
      <i class="fa fa-lock  text-danger"></i>
      <i class="fa fa-unlock text-success"></i>
    </div>
    <div class="chart-value"></div>
    <div class="legend">Team 4</div>
  </label>

  <label for="team5" class="bar">
    <input type="radio" id="team5" name="team" value="team5">
    <div class="icons-bar">
      <i class="fa fa-lock  text-danger"></i>
      <i class="fa fa-unlock text-success"></i>
    </div>
    <div class="chart-value"></div>
    <div class="legend">Team 5</div>
  </label>
</div>

HTML Radio buttons like Bar Graphs and Corresponding Labels right bellow them like X-axis names

1 Answers1

Each Radio Button

Styling