单选按钮选中的点不在中心

Question

如果选中单选选项，我的单选按钮的选中点不会出现在中心。

请在下面找到我的fiddle：

/* checkbox -*/

.radio-s label,
.radio-s input[type="radio"]+span,
.radio-s input[type="radio"]+span::after,
.checkboxe-s label,
.checkboxe-s input[type="checkbox"]+span,
.checkboxe-s input[type="checkbox"]+span::after {
  display: inline-block;
  vertical-align: middle
}

.radio-s,
.checkboxe-s {
  position: relative
}

.radio-s label *,
.checkboxe-s label * {
  cursor: pointer
}

.radio-s input[type="radio"],
.checkboxe-s input[type="checkbox"] {
  position: absolute;
  display: none
}

.radio-s input[type="radio"]+span,
.checkboxe-s input[type="checkbox"]+span {
  color: #333
}

.radio-s label:hover span,
.checkboxe-s label:hover span {
  color: #000
}

.radio-s input[type="radio"]+span::after,
.checkboxe-s input[type="checkbox"]+span::after {
  margin: 0 auto 0 10px;
  width: 13px;
  height: 13px;
  border: solid 2px #ccc;
  background-size: 13px;
  content: "";
  text-align: center;
  line-height: 17px;
  border-radius: 50%;
  /*display: block;*/
}

.checkboxe-s input[type="checkbox"]+span:hover::after {
  border: solid 2px #5a5a5a
}

.radio-s input[type="radio"]:checked+span::after,
.checkboxe-s input[type="checkbox"]:checked+span::after {
  width: 13px;
  height: 13px;
  border: 2px solid #01A982;
  background-color: #FFFFFF;
  color: #01A982;
  line-height: 17px
}

.radio-s input[type="radio"]:disabled+span,
.checkboxe-s input[type="checkbox"]:disabled+span {
  opacity: .4;
  cursor: default
}

.checkboxe-s input[type="checkbox"]+span::after {
  border-radius: inherit;
}

.radio-s input[type="radio"]:checked+span::after {
  content: "22";
  font-size: 24px
}

.checkboxe-s li {
  list-style: none;
}

:root .checkboxe-s input[type="checkbox"]:checked+span::after {
  content: "13";
  font-family: arial;
  font-size: 14px;
  font-weight: bold;
}

.checkboxe-s input[type="checkbox"]:checked+span::after {
  background-color: #FFFFFF;
  border: solid 2px #01A982;
  color: #01A982;
  line-height: 14px;
}

.checkboxe-s input[type="checkbox"]:checked+span::after {
  border: solid 2px #01A982;
}

<h1>Radio</h1>
<div class="radio-s">
  <label for="radio1" class="radio">
    <input type="radio" name="optionsRadios" id="radio1" />
    <span class="comp-name">Radio 1</span>
  </label>
</div>
<div class="radio-s">
  <label for="radio2" class="radio">
    <input type="radio" name="optionsRadios" id="radio2" />
    <span class="comp-name">Radio 1</span>
  </label>
</div>

Answer 1

line-height 是问题所在。

例如，将其设置为 14px 可能会解决您的问题。

.radio-s input[type="radio"]:checked + span::after {
  line-height: 14px;
}

编辑： 我建议您将您的无线电圈的宽度和高度转换为 14px，然后将 line-height 转换为 14px .因为它看起来像被 1px 关闭因为数字 13 是奇数。

单选按钮选中的点不在中心

Radio button checked dot is not coming in center

html

css

radio-button