Как правильно отцентрировать проверенный переключатель? ⇐ CSS

[Anonymous]

Я создавал переключатель и не смог центрировать точку, когда она была отмечена. Я пытался использовать абсолютное позиционирование и отображение сетки, чтобы центрировать его, но безуспешно. Может ли кто-нибудь сказать мне причину и как ее решить?


< pre class="snippet-code-css lang-css Prettyprint-override">

Код: Выделить всё

/*--------styling using absolute poistionning---------*/
input[type="radio"]#id2{
appearance: none;
position: relative;
border-radius: 50%;
height: 1.6rem;
width: 1.6rem;
cursor: pointer;
border:2px solid rgb(18, 141, 223);
}

input[type="radio"]#id2::after{
position: absolute;
transform: translate(0.1rem,0.1rem);
content:"";
opacity: 0;
border-radius: 50%;
height: 1.2rem;
width: 1.2rem;
font-size: 1.2rem;
line-height: 2rem;
cursor: pointer;
background: rgb(18, 141, 223);
}

input[type="radio"]#id2:checked::after{
opacity: 1;
transition: ease 450ms;
}

/*-----------------styling using grid----------*/

input[type="radio"]#id1 {
appearance: none;
display: grid;
place-items: center;
border-radius: 50%;
height: 1.6rem;
width: 1.6rem;
cursor: pointer;
border:2px solid rgb(18, 141, 223);
}

input[type="radio"]#id1::after{
content:"";
opacity: 0;
border-radius: 50%;
height: 1.2rem;
width: 1.2rem;
cursor: pointer;
background: rgb(18, 141, 223);
}

input[type="radio"]#id1:checked::after{
opacity: 1;
transition: ease 450ms;
}

Код: Выделить всё

using grid layout


using absolute positionning

Я пробовал оба способа, но безуспешно.

Подробнее здесь: https://stackoverflow.com/questions/784 ... dio-button