Как сделать кроссбраузерную верстку radio button?

Question

[Никита Гущин]

Здравствуйте! Есть код - jsfiddle, проблема в том, что в сафари(ios -> iphone) точка в radio button смещается к низу (а должна быть по-центру).

На компьютере точка находится ровно по центру (или около того). Как можно сделать, чтобы точка отображалась по центру в ios\safari ?

Answer 1

[Виталий Киренков]

Я бы предложил вам другое решение. С символом вы долго будете мучаться... Шрифт подбирать, размер шрифта, интерлиньяж и т.п.

Лучше так

.someClass { postiotion: relative;}
.someClass::before {
	position: absolute; display: block; content: ""; width: 8px; height: 8px; background-color: red; border-radius: 4px; top: 50%; left: 0; margin-top: -4px;
}

Answer 2

[lnked]

lnked.ru/html/stilizovannye_radio_knopki_bez_yavaskript

Answer 3

[Константин Величко]

Сделать точку не символом а блоком, его уже позиционировать
хз какой шрифт к ней применяется

Answer 4

[personaljs]

спрячьте инпут и кастомизируйте label for инпута