Blackbird Blackbird - 1 month ago 10
CSS Question

jQuery/CSS Advanced Radio-Button Plugin

I wonder if there is any plugin or any easy way to achieve something like that (It's some kind of radio-button which moves the selector to the selected option) - Thanks in advance:
enter image description here

Answer Source

.container{
  display: inline-block;
  border:1px solid lightgray;
  border-radius:40px;
}

input[name=radio]{
  display: none;
}

label{
  display: inline-block;
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 40px;
  cursor: pointer;
}
input:checked + label{
  background-color: skyblue;
  color: white;
}
<div class="container">
  <input type="radio" name="radio" id="radio-1" checked/>
  <label for="radio-1">Round</label>
  <input type="radio" name="radio" id="radio-2" />
  <label for="radio-2">One Way</label>
  <input type="radio" name="radio" id="radio-3" />
  <label for="radio-3">Multi</label>
</div>