Design Toggle button using Radio buttons - html

Question

I am trying to develop toggle buttons using plain CSS. My toggle button should look like the below image.
Here is the snippet of the code that I created.
.btn {
display: inline-block;
margin-bottom: 0;
text-align: center;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 3px 16px;
font-family: ABBvoice;
font-size: 13px;
font-weight: 500;
border-radius: 0;
height: 30px;
padding-bottom: 7px;
}
.btn-default-toggle-ghost,
.btn-default-toggle-ghost:focus {
background: transparent;
border: 1px solid rgba(160, 160, 160, 0.6);
color: #464646;
outline: none;
}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default-toggle-ghost active">
<input type="radio" name="test-toggle" checked="checked"> Option 1
</label>
<label class="btn btn-default-toggle-ghost active">
<input type="radio" name="test-toggle"> Option 2
</label>
</div>
Above code displays toggle button as below.
Can someone help me to correct the css in the above code? Any help would be appreciated. Thank you.

Answer 1

This will work for you:
Input can't be styled so, it's better to hide them and style there label as per your need.
.btn {
display: inline-block;
margin-bottom: 0;
text-align: center;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 3px 16px;
font-family: ABBvoice;
font-size: 13px;
font-weight: 500;
border-radius: 0;
height: 30px;
padding-bottom: 7px;
}
.btn-default-toggle-ghost,
.btn-default-toggle-ghost:focus {
background: transparent;
border: 1px solid rgba(160, 160, 160, 0.6);
color: #464646;
outline: none;
text-align: center;
font-size: 16px;
line-height: 30px;
position: relative;
float: left;
}
.btn-group [type="radio"] {
display: none;
}
[type="radio"]:checked+.btn-default-toggle-ghost {
background: #DEDEDE;
}
[type="radio"]:checked+.btn-default-toggle-ghost:after {
content: '';
position: absolute;
top: 0px;
height: 3px;
background: #0093F6;
left: 0px;
right: 0px;
}
.btn-default-toggle-ghost+[type="radio"]+.btn-default-toggle-ghost{
border-left:0px;/*for removing the extra border between the buttons*/
}
<div class="btn-group" data-toggle="buttons">
<input type="radio" id="one" name="test-toggle" checked="checked">
<label for="one" class="btn btn-default-toggle-ghost active">
Option 1
</label>
<input type="radio" id="two" name="test-toggle">
<label for="two" class="btn btn-default-toggle-ghost active">
Option 2
</label>
</div>
I hope this works fine for you.

Answer 2

You can check out for attribute for label. Notice that I placed label right after input[type=radio]
.btn {
display: inline-block;
margin-bottom: 0;
text-align: center;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 3px 16px;
font-family: ABBvoice;
font-size: 13px;
font-weight: 500;
border-radius: 0;
height: 30px;
padding-bottom: 7px;
}
.btn-default-toggle-ghost, .btn-default-toggle-ghost:focus {
background: transparent;
border: 1px solid rgba(160,160,160, 0.6);
color: #464646;
outline: none;
}
input[type=radio]{
/* comment this out to check if radio input is checked */
display: none;
}
input[type=radio]:checked+label{
background-color: blue;
color: white;
}
<div class="btn-group" data-toggle="buttons">
<input id="option-1" type="radio" name="test-toggle" checked="checked">
<label for="option-1" class="btn btn-default-toggle-ghost active">
Option 1
</label>
<input id="option-2" type="radio" name="test-toggle">
<label for="option-2" class="btn btn-default-toggle-ghost active">
Option 2
</label>
</div>