智能手机上带有单选按钮的css滑块

<div class="slider">
  <input type="radio" name="option" id="option1" checked>
  <label for="option1">选项1</label>
  <input type="radio" name="option" id="option2">
  <label for="option2">选项2</label>
  <input type="radio" name="option" id="option3">
  <label for="option3">选项3</label>
  <div class="slider-bar"></div>
</div>

.slider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 300px;
  height: 40px;
  background-color: #eaeaea;
  border-radius: 20px;
  overflow: hidden;
}

.slider input[type="radio"] {
  display: none;
}

.slider label {
  flex: 1;
  text-align: center;
  cursor: pointer;
}

.slider-bar {
  width: 100px;
  height: 40px;
  background-color: #007bff;
  border-radius: 20px;
  transition: transform 0.3s;
}

#option1:checked ~ .slider-bar {
  transform: translateX(0);
}

#option2:checked ~ .slider-bar {
  transform: translateX(100px);
}

#option3:checked ~ .slider-bar {
  transform: translateX(200px);
}