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
.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>CodePudding user response：
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>