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...
