Как сверстать такий элемент?

Question

[Saberwalker]

Подскажите как правильно сверстать такие элементы на css:
1)
имеет 3 разных размера для элементов (для десктопа, планшета, моб) "+" и " - "
https://codepen.io/KitKat_zzz/pen/YLjEOo

2) Не получается подобрать правильный селектор для стилизации "чекнутого " радиобатона

https://codepen.io/KitKat_zzz/pen/deQmXW

Answer 1

[Хороший UI]

Если я правильно понял то что то вроде этого - https://codepen.io/you_web/pen/YLRLKO
Но насколько я помню, не рекомендуется кастомная стилизация чекбоксов.

Алгоритм по данному примеру полностью описывать не буду, по коду будет видно, скажу лишь смысл:
1)Скрываешь дефолтный чекбокс
2) Создаешь элемент который будет его заменять
3) Задаешь ему нужные стили + позиционирование
4) Используя псевдокласс (в данном случае :checked) + псевдоэлемент (при желании можно и без него), задаешь кастомный стиль.

Размеры, бэкграунд и т.д меняешь как тебе нужно

Comments

[Saberwalker]

по этому принципу и сделал, проблема - подобрать правильный селектор