Mesuti
@Mesuti

Input before и after в MacOS в Safari?

Привет!
В хром и мозилле все норм, а на мак в сафари проблемы с отображением- дефолтные input видны и съехали?
Чекбоксы и радио сделаны ввиде картинок (псевдоэлементы)
Как можно скрыть стандартный чекбокс и радио в сафари и оставить опубликованным псевдоэлемент?
5a563452ef6c4741017967.jpeg
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
}

  • Вопрос задан
  • 374 просмотра
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Спецификацию почитайте!
У инпутов нет псевдо элементов.
То, что они есть в некоторых браузерах — недокументированная возможность, не стоит использовать.

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

<input>
<span></span>


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

Ну а стандартный просто скрывается (display:none;)
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы