Result
content: counter;を使ってチェック数をカウントする、というもの
JSによるもののように応用は効きませんが、数えるだけなら
css
.languages {/*リセット*/ counter-reset: characters;}input:checked {/*チェックされたらカウント*/ counter-increment: characters;}.total:after {/*疑似要素で任意の場所にカウント結果を表示*/ content: counter(characters)"個の項目をチェックしています";} |
html
<div class="languages"> <div class="input-wrapper"> <input id="foo" type="checkbox"><label for="foo">foo</label> </div> <div class="input-wrapper"> <input id="bar" type="checkbox"><label for="bar">bar</label> </div> <div class="input-wrapper"> <input id="piyo" type="checkbox"><label for="piyo">piyo</label> </div> <div class="input-wrapper"> <input id="hoge" type="checkbox"><label for="hoge">hoge</label> </div> <div class="input-wrapper"> <input id="huga" type="checkbox"><label for="huga">huga</label> </div></div> <p class="total"> 現在</p> |
can i use
CSSカウンターのブラウザサポート状況です。軒並み良好でしょうか。
via
Just a moment...
codepen.io
