React+TypeScript: clickable checkbox css art

はじめに

作りかけ。材料。

イデア
clickable checkbox css art

と言う物で、css で描いた画像を並べた (css art) コレクションで、クリックすると何らかの変化があるものでクリックは onClick ではなく、html の checkbox を使う。

とりあえずクリックしてみて下さい。

実行例

See the Pen checkbox-css-art by kalz2q (@kalz2q) on CodePen.

説明

以前に画像をクリックすると大きくバツ、バッテン、cross が表示される記事 (React+TypeScript: checkboxを使った画像の書き換え) を書いていて、そこでは checkbox の変化を onChange で取得して useState hook で className を書き換えた。

これではせっかくの checkbox の機能を使っていないので checkbox の checked 擬似クラスを使って単純にならないか、と思って試行錯誤中です。