How to make the counter of selected items (checkbox) standard means without using JS?
If the selected elements are missing, the block with the counter should be hidden.
|
1 answer
Wrote a small example of the count of selected items (checkbox).
It is useful as an introduction to the capabilities of CSS.
input:checked { counter-increment: list; } .result { display: none; } input:checked ~ .result { display: block; } .result::after { content: "Selected: "counter(list); }
PS We are waiting for variables in CSS
Demo:
input:checked { counter-increment: list; } .result { display: none; } input:checked ~ .result { display: block; } .result::after { content: "Selected: "counter(list); }
<h3>Select any checkbox</h3> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <div class="result"></div>
|