How to mark up such a element?

Tell me how to properly mark up these elements in the css:
1)5afe01647bb88291422963.png
has 3 different size elements (for desktop, tablet, mobile) "+" and " - "
https://codepen.io/KitKat_zzz/pen/YLjEOo

2) can't find the right selector for styling the "crazy" of RadioButton

https://codepen.io/KitKat_zzz/pen/deQmXW
June 5th 19 at 21:19
2 answers
June 5th 19 at 21:21
Why are you radiobtn torment? Do the button input, and using js to process. Less fuss
preferably in css, the customer wants to at least js was. - Julio_Schumm commented on June 5th 19 at 21:24
June 5th 19 at 21:23
If I understand correctly then something like this - https://codepen.io/you_web/pen/YLRLKO
But as far as I remember, it is not recommended custom styling checkboxes.

The algorithm on this example to fully describe will not be seen by the code, except to say the meaning:
1)Hide default checkbox
2) Create the element which will be used to replace it
3) Ask him the right styles + positioning
4) Using the pseudo-class (in this case :checked) + the pseudo-element (at desire it is possible and without it) set the custom style.

Size, background etc change as you need
according to this principle, and made, the problem is to pick the right selector - Julio_Schumm commented on June 5th 19 at 21:26

Find more questions by tags CSSHTMLLayout