Можно ли сделать такой счетчик на css?

Question

[Дмитрий Смирнов]

Добрый вечер! Можно ли реализовать такой счетчик на css?


Если это возможно, то каким образом?

Comments

[twobomb]

Без js нет

[Андрей Токмаков]

сверстать то можно, но считать он будет только скриптом

[iBird Rose]

главный вопрос: Зачем?

[twobomb]

https://css-tricks.com/number-increment-buttons/

[Дмитрий Смирнов]

Всем спасибо. Делаю на джс.

[Алекс Глебов]

на codeipen есть поиск
поищи готовые

Answer 1

[Stalker_RED]

Работает без скриптов: https://jsfiddle.net/rhxdaj6x/1/
Но, конечно, не стоит таким пользоваться. Вам все верно сказали, лучше добавить немножко js.

Comments

[xmoonlight]

Жжошь! До бинарной рекурсии по состояниям переключателей - недалеко осталось)))

Answer 2

[Alexander Pushkarev]

Запомните - интерактивные элементы только на JS. Расположить элементы конечно можно.

Comments

[xmoonlight]

Неа, не всегда: можно, например, сделать открытие попап-меню и/или спойлера через чек-бокс вообще без JS)))

[Alexander Pushkarev]

xmoonlight: таких людей по рукам надо бить. Есть JS, он для этого и предназначен. Тем более там это делать меньше минуты

[xmoonlight]

Alexander Pushkarev: вопрос не в трудозатратах, а в производительности: JS - более тормозной, чем CSS.

[Sergiu Mitu]

xmoonlight: возможно когда-то разница была заметна, сейчас нет.

Answer 3

[xmoonlight]

Визуализацию - можно и нужно сделать на CSS.
Функциональность (изменение счётчика по нажатию на кнопки) - только на JS.

Comments

[Stalker_RED]

Я вот прямо сейчас пробую сделать чисто на css + html. И кажется получается.

[xmoonlight]

Stalker_RED: хотелось бы увидеть чудо реализации на jsfiddle!

[Stalker_RED]

xmoonlight: запостил

[xmoonlight]

Stalker_RED: мда... хотя и всего до 4-х, хотя и слоями, но реально круто!