CSSで実装が面倒なトグルをさまざまなデザインで簡単に実装できるCSSの軽量ライブラリ -MoreToggles.css

Post on:2020年3月9日

MoreToggles.cssの特徴

MoreToggles.cssは、さまざまなデザインのトグルを簡単に実装できるCSSライブラリです。classを追加するだけで、簡単に利用できます。

デモではMoreToggles.cssで実装されたさまざまなデザインのトグルを楽しめます。
iOSやAndroidをはじめ、チェック、スクエア、絵文字などもあります。

当スタイルシートを外部ファイルとして記述します。

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/MoreToggles.css/output/moretoggles.min.css">
</head>

<head>

</head>

トグルを実装するinputとlabel要素をdiv要素で内包し、.mt-*を与えます。「*」はスタイルを選択できます。

<div class="mt-ios"> 
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>

</div>

各スタイルには、カラーのバリエーションも用意されており、classで適用できます。

<div class="mt-ios-red"> 
  <input id="2" type="checkbox" />
  <label for="2"></label>
</div>

</div>

ラッパーのdivにfont-size：10px;を加えることで、トグルを拡大縮小できます。別の数字を試してみると、トグルがスムーズに拡大縮小します。

<div class="mt-ios" style="font-size:10px;">
  <input id="3" type="checkbox" />
  <label for="3"></label>
</div>

</div>