borderで作るカスタムCheckbox

ポイント

• TABでフォーカスできるようにinput要素はdisplay:none;にはしない。
• 間接セレクタ(~)を使用することで、input要素がcheckedになった時のCSSを兄弟セレクタに当てる。

サンプルコード

• :disabledや:indeterminateは記載していない。
• appearanceを使用しているのでIE未対応

プロジェクト中に作成したけど、画像使うことになってボツになったコードの一部です笑