Input before и after в MacOS в Safari?

Question

[Mesuti]

Привет!
В хром и мозилле все норм, а на мак в сафари проблемы с отображением- дефолтные input видны и съехали?
Чекбоксы и радио сделаны ввиде картинок (псевдоэлементы)
Как можно скрыть стандартный чекбокс и радио в сафари и оставить опубликованным псевдоэлемент?

html

<div class="form-left__sex">
    <label for="">Пол:</label>
    <input type="radio" id="man" name="sex" checked> мужчина
    <input type="radio" id="wooman" name="sex"> женщина
</div>

css

.form form .form-left__sex input:checked::before {
    content: url(../img/icons/radio-active.png);
    position: relative
}
.form form .form-left__sex input::before {
    content: url(../img/icons/radio.png);
    left: -20px;
    position: relative;
    top: 1px
}

Answer 1

[Сергей delphinpro]

Спецификацию почитайте!
У инпутов нет псевдо элементов.
То, что они есть в некоторых браузерах — недокументированная возможность, не стоит использовать.

По теме: обычно таким образом стилизуется label/span или его псевдоэлемент.

<input>
<span></span>

input:checked + span {}
или (по ситуации)
input:checked ~ span {}

Ну а стандартный просто скрывается (display:none;)