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

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使った方法のがシンプルで分かりやすいですが、もしそのような場合はこれらで移動する動きを代替することができます。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.