How to make a circle in custom radio even?

Question

css

The circle is dark, not smooth, and not visually centered. How to fix it? https://jsfiddle.net/h6cq2ocq/2/

Answer 1

Corrected version: https://codepen.io/suberg/pen/RMvvbj
It is better to make a circle using the background-clip: content-box property and set padding (for margins around the edges) then it will be centered even when the input is resized.
It is not clear why the non-custom input is not completely hidden (display: none), but moves a little lower.
I recently made a similar input, it might be useful: https://codepen.io/suberg/pen/eMxbyo

Answer 2

Could you attach a screenshot? Your example works fine for me. Are you talking about the circle of a checked radio button? Uneven alignment can be due to the fact that the circle symbol itself has odd dimensions, and the container with which it aligns is even. Hence the 1 pixel offset. The character you use in the checked radio button is not 30px, 30 is the size of the text, and the size of this character is smaller, the actual size of this character may just be odd

Answer 3

Well, there are many examples on the same codepen. Why reinvent the wheel. Don't be lazy, come and have a look. Customize the already prepared solution for yourself. Your layout is extremely weak. Use classes for styles, not tags at least. Well, it really hurts to watch.