将标签与CSS 3花式单选按钮对齐

dagda1 发表于 Dev

dagda1

我有以下单选按钮，我需要较大的圆圈为38px

input[type=radio] {
  visibility: hidden;
}

.label {
  font-weight: normal;
  color: #333;
}

.label::before {
  content: '';
  position: absolute;
  left: 0;
  width: 38px;
  height: 38px;
  border: 1px solid #727272;
  border-radius: 50%;
}

input[type=radio]:checked+label:after {
  content: '';
  position: absolute;
  width: 38px;
  height: 38px;
  left: 0;
  background: #0065bd;
  border: none;
  transform: scale(0.5);
  border-radius: 50%;
}

<div class="container">
  <input type="radio" id="radio1" value="on">
  <label for="radio1" class="label">Yes</label>
</div>

这是一个小提琴，如何对齐标签，使其与居中对齐并推到圆的右侧？

雷切尔·加伦（Rachel Gallen）

也许您的代码使事情变得过于复杂。因为您希望输入更大，也许应该将大小调整等重点放在输入而不是标签上？

请参阅代码段（自编辑以来，收音机现在变成蓝色，根据此Codepen改编。单击前为灰色，单击后为蓝色，居中并从边缘凹进）。

请注意：如果您要使用默认值（并且只有一个选项），那么自定义复选框可能是更合适的选择？（单选按钮通常用于用户会有2个或更多选择，但只能选择一个的情况）。

input[type="radio"] {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid #727272;
}

input[type="radio"]+label span {
  display: inline-block;
  width: 38px;
  height: 38px;
  margin: 9px;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
  background-color: grey;
}

input[type="radio"]:checked+label span {
  content="";
  background: #0065bd;
}

input[type="radio"]+label span,
input[type="radio"]:checked+label span {
  -webkit-transition: background-color 0.4s linear;
  -o-transition: background-color 0.4s linear;
  -moz-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
}

<div class="container">
  <input type="radio" id="radio1" name="radio">
  <label for="radio1" class="label"><span></span>Yes</label>

  <input type="radio" id="radio2" name="radio">
  <label for="radio2" class="label"><span></span>No</label>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。