Как сделать в кастомном radio круг ровным?

Question

[freeman0204]

Круг темный не ровный какой то и не по центру визуально. Как это исправить? https://jsfiddle.net/h6cq2ocq/2/

Comments

[Владимир Кашутин]

https://jsfiddle.net/h6cq2ocq/32/

Answer 1

[suberg]

Подправленный вариант: https://codepen.io/suberg/pen/RMvvbj
Круг лучше делать используя свойство background-clip: content-box и задать padding(для отступов по краям) тогда он будет по центру и при изменении размеров инпута.
Не понятно, почему некастомный инпут не скрывается полностью(display: none), а перемещается чуть ниже.
Недавно верстал похожий инпут, может быть полезным: https://codepen.io/suberg/pen/eMxbyo

Answer 2

[Вадим Белкин]

Могли бы вы приложить скриншот? У меня ваш пример отображается нормально. Вы же про круг чекнутой радиокнопки? Неровное выравнивание может быть из-за того что сам символ круга имеет нечетные размеры, а контейнер относительно которого он выравнивает - четные. Отсюда и смещение в 1 пиксель. Символ который вы используете в чекнутой радиокнопке размером не 30px, 30 - это размер текста, а размер данного символа меньше, фактический размер этого символа как раз и может быть нечетным

Answer 3

[NaN]

Ну много же примеров на том же codepen. Зачем придумывать велосипед. Не поленитесь, зайдите, посмотрите. Подправьте уже готовое решение под себя. Ваша верстка крайне слаба. Используйте классы для стилей, а не теги, хоты бы. Ну реально, больно смотреть.