单选按钮标签显示不正确

Question

我有三个单选按钮，分别为它们设置了标签。由于某些原因，标签似乎合并到我的单选按钮中。

如何阻止它们合并并为其提供更好的间距？

这是我尝试过的东西

#radios {
  position: relative;
  width: 50%;
  margin: 0 auto;
}

.input1 {
  margin-left: 12px;
}

input[type="radio"] {
  position: absolute;
  right: 1000%;
}

label {
  float: left;
  width: 4%;
  padding-bottom: 4%;
  margin: 0 2.5%;
  background: #0096ff;
  border-radius: 50%;
  cursor: pointer;
}

#slider {
  position: absolute;
  left: 0%;
  top: 0;
  width: 2%;
  padding-bottom: 2%;
  margin: 4px 0 0 14px;
  background: #000;
  transition: transform 1s;
  border-radius: 50%;
  animation-timing-function: ease-in-out;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  transition: 0.2s left .05s ease-in-out;
}

#input1:checked~#slider {
  animation-name: input1;
  left: 0;
}

#input2:checked~#slider {
  animation-name: input2;
  left: 9%;
}

#input3:checked~#slider {
  animation-name: input3;
  left: 18%;
}

#input4:checked~#slider {
  animation-name: input4;
  left: 27%;
}

#input5:checked~#slider {
  animation-name: input5;
  left: 36%;
}

@keyframes input1 {
  30%,
  70% {
    transform: scale(0.5);
  }
}

@keyframes input2 {
  30%,
  70% {
    transform: scale(0.5);
  }
}

@keyframes input3 {
  30%,
  70% {
    transform: scale(0.5);
  }
}

@keyframes input4 {
  30%,
  70% {
    transform: scale(0.5);
  }
}

@keyframes input5 {
  30%,
  70% {
    transform: scale(0.5);
  }
}

<div id="radios">
  <label class="input1" for="input1">aa</label>
  <input id="input1" name="radio" type="radio" />
  <label class="input1" for="input2">sss</label>
  <input id="input2" name="radio" type="radio" />
  <label class="input1" for="input3">dd</label>
  <input id="input3" name="radio" type="radio" />
  <span id="slider"></span>
</div>

此处https://jsfiddle.net/xh7ofaz9/1/实时显示 标签之间应该有空格

它应该看起来像->

Answer 1

这是一种执行此操作的方法。基本上，您不能设置标签的背景本身，因为您需要将视觉和文本分开。

为此，我使用了:before伪元素并进行了一些必要的样式更改。我必须承认，我不喜欢为元素设置固定宽度（width: 16%;），但是如果没有JavaScript，我看不到其他选项来制作该动画。

我发现的最相似的方法是：https://codepen.io/web-tiki/pen/JXwLGQ/，但是它没有标签的文本，因此更容易。

#radios {
  position: relative;
  width: 50%;
  margin: 0 auto;
}

.input1 {
  margin-left: 12px;
}

input[type="radio"] {
  position: absolute;
  right: 1000%;
}

label {
  float: left;
  width: 16%;
  margin: 0 2.5%;
  cursor: pointer;
}

label:before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #0096ff;
  margin-right: 5px;
}

#slider {
  position: absolute;
  left: 0%;
  top: 0;
  width: 2%;
  padding-bottom: 2%;
  margin: 4px 0 0 14px;
  background: #000;
  transition: transform 1s;
  border-radius: 50%;
  animation-timing-function: ease-in-out;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  transition: 0.2s left .05s ease-in-out;
}

#input1:checked~#slider {
  animation-name: input1;
  left: 0;
}

#input2:checked~#slider {
  animation-name: input2;
  left: 22%;
}

#input3:checked~#slider {
  animation-name: input3;
  left: 44%;
}

#input4:checked~#slider {
  animation-name: input4;
  left: 27%;
}

#input5:checked~#slider {
  animation-name: input5;
  left: 36%;
}

@keyframes input1 {
  30%,
  70% {
    transform: scale(0.5);
  }
}

@keyframes input2 {
  30%,
  70% {
    transform: scale(0.5);
  }
}

@keyframes input3 {
  30%,
  70% {
    transform: scale(0.5);
  }
}

@keyframes input4 {
  30%,
  70% {
    transform: scale(0.5);
  }
}

@keyframes input5 {
  30%,
  70% {
    transform: scale(0.5);
  }
}

<div id="radios">
  <label class="input1" for="input1">aa</label>
  <input id="input1" name="radio" type="radio" />
  <label class="input1" for="input2">sss</label>
  <input id="input2" name="radio" type="radio" />
  <label class="input1" for="input3">dd</label>
  <input id="input3" name="radio" type="radio" />
  <span id="slider"></span>
</div>