Можно ли улучшить поддержку стилизации радио и чекбоксов SVG?

Question

[wufapexef]

К своему разочарованию увидел что эти чекбоксы вообще не работают в Фаерфоксе и очень криво в Сафари и iOS.
При этом, я думал что это лучший способ стилизации radio и checkbox.

Можно ли исправить? https://codepen.io/kodej/pen/LzyBmP

Какой лучший способ стилизации с точки зрения поддержки браузерами и платформами?

Answer 1

[Илья Герасимов]

JS лучший стилизатор, если он по каким-то причинам не работает у нас всегда есть дефолт.
Тоесть после прогрузки скриптов и DOM-a прячем чекбоксы и выдаем свою верстку, ловим события клика и обновляем состояние спрятанного чек-бокса

Comments

[wufapexef]

Что значит первая часть

Тоесть после прогрузки скриптов и DOM-a прячем чекбоксы

Куда прячем, что значит после прогрузки скриптов? Как оставить семантику?

[Илья Герасимов]

type="hidden" на чекбокс, рядом отрисовываем свои блоки, посмотрите готовые примеры, так делают с чекбоксами, селектами и всем остальным, что не удается кастомизировать простыми средствами

Answer 2

[Олег]

Можно и без svg ;) https://jsfiddle.net/yp6szmc8/

Comments

[wufapexef]

Анимация нужна.

[Олег]

wufapexef, так в чем проблема? Анимируй css animation

[wufapexef]

Что ты предлагаешь анимировать? Уже стоит transition: all .15s ease; и анимации нет

[Олег]

wufapexef, https://jsfiddle.net/Politonius/yp6szmc8/1/

Answer 3

[Ankhena]

https://codepen.io/anon/pen/xXdeRw либо наinput + label

Comments

[wufapexef]

Короче говоря - вы просто повесили всю красоту на span?

[Ankhena]

wufapexef, угу, поскольку background у чекбоксов работает странно, а ::after выглядит еще хуже, поскольку у input из в принципе быть не должно.

[wufapexef]

Ankhena W, подождите, разве у инпутов есть псевдоэлементы? Я думал у них вообще нету after

[Ankhena]

wufapexef,

подождите, разве у инпутов есть псевдоэлементы? Я думал у них вообще нету after

интересно, а ответ выше вы отмечали решением не глядя?

[wufapexef]

Ankhena W, точно. Не заметил. Я просто на днях пытался на select поставить псевдо и не нашел. Для селекта его вообще нету?