borderで作るカスタムCheckbox

ポイント

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

サンプルコード

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

タイトルとURLをコピーしました