CSSのみでcheckboxの装飾とチェック時アニメーションを実装したものをまとめた「Switcher styles collection」

  • Posted on
  • Category : Tips
CSSのみでcheckboxの装飾とチェック時アニメーションを実装したものをまとめた「Switcher styles collection」

ひと通り揃っていて良いなと思ったので備忘録兼ねてご紹介。「Switcher styles collection」は <input type="checkbox"> と<label> を組み合わせて作成したスイッチスタイルをまとめているもので、装飾やチェック時のアニメーションなどすべてCSSのみで実装されています。

実際の表示や動きの確認は以下のようにCodePenのデモで確認できるようになっています。
デザインパターンは丸みを帯びた「Inset」、マテリアルデザインの「Material design」と「Material design small」、ボックスタイプの「Box」、ちょっとしたアニメーション付きの「Flex」や「Bubble」など全11種類となっており、よく利用しそうな見た目や動きはひと通り揃っていると思います。
また、HTMLも最低限必要な<input type="checkbox" id="xxx"><label for="xxx"></label>を組み合わせているだけなので非常にシンプルです。

See the Pen Switcher styles collection by Imagine Alex (@ImagineAlex) on CodePen.

CSSはLESSが利用されているので、コンパイル後(普通の)CSSでスタイルを見たい場合はCodePenに飛び、そこでCSSが表示されているエリアにある「View Compiled」ボタン押下で確認できます。

ちなみに、このデモではトグルの移動にleft: calc(100% - 20px);というようにcalcを利用していますが、何らかの理由で移動するのに他の手段を使いたい場合は単純にスイッチの領域が決まっているならleftをpx指定するとか領域が決まっていないならtransform: translateX(100%)(場合によっては+αで記述が必要)を使って移動させるといった方法もあります。
現在はほぼ考えなずに使えることが多いですし、普通にcalc使った方法のがシンプルで分かりやすいですが、もしそのような場合はこれらで移動する動きを代替することができます。

Back to Top

CSSのみでcheckboxの装飾とチェック時アニメーションを実装したものをまとめた「Switcher styles collection」

CSSのみでcheckboxの装飾とチェック時アニメーションを実装したものをまとめた「Switcher styles collection」

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。