Design Toggle button using Radio buttons

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>