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

Question

我有以下单选按钮，我需要更大的圆圈为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>

这是fiddle，如何对齐标签，使其与居中对齐并推到圆圈右侧？

Answer 1

添加.container{ line-height:38px}让它居中（看起来它已经在右边）

https://jsfiddle.net/8gubpzhq/

将其移到右侧将其添加到

  .label {
  font-weight: normal;
  color: #333;
  padding-left:5px;//add this line
}

https://jsfiddle.net/vszuu535/

Answer 2

您可以将line-height:40px;添加到.label以使其垂直居中。要将其向右移动更多，您可以添加padding-left:20px;（您可以更改line-height和padding-left以满足您的需求。

＆＃13;

＆＃13;

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

.label {
  font-weight: normal;
  color: #333;
  line-height:40px;
  padding-left:20px;
}

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

也许你的代码过于复杂;如果您希望输入更大，也许您应该将大小调整等重点放在输入而不是标签上？

查看代码段（收音机现在自编辑后变为蓝色，改编自this codepen。在点击之前为灰色，在蓝色之后，居中，并从边缘缩进）。

只需注意：如果您要使用默认值（并且只有一个选项），自定义复选框可能是更合适的选择吗？ （无线电按钮通常用于用户有2个或更多选择的情况，但只能选择一个）..只是一个想法。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;