单选按钮检查点不在中心

Question

如果选中了无线电选项，我的单选按钮的选中点不会进入中心位置。

请在下面找到我的小提琴：

/* 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:"\2022";

    font-size:24px

}

.checkboxe-s li {

    list-style: none;

}

:root .checkboxe-s input[type="checkbox"]:checked + span::after {

    content:"\2713";

    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是奇数。