はじめに
作りかけ。材料。
アイデアは
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 擬似クラスを使って単純にならないか、と思って試行錯誤中です。