【HTMLとCSS】オンオフ切り替えボタン(Googleっぽいやつ)

HTML/CSS/Sass

Googleっぽいオンオフ切り替えボタンが作りたくなったので、自分で実装してみました。コードも含めて紹介していきます。

ざっくり方針

  1. inputのcheckboxタイプを使って実装します。CSSクラスの切り替えで操作することもできますが、Boolean(true/false)を取得したかったので、checkboxを選択しました。
  2. checkboxはボックスを変形できないため、checkboxに付随するlabelとその疑似要素でボタンを作ります

HTML要素を作る

注意ポイントは、inputにはidを設定して、対応するlabelにhtmlForを設定しておくことです。こうすることで、labelがクリックされた場合でも、inputにチェックが入るようになります。

<input
     type="checkbox"
     id="check1"

     // defaultCheckedを使用する場合はここで設定します。
/>
<label htmlFor="check1"}>チェック1</label>

<input
     type="checkbox"
     id="check2"
/>
<label htmlFor="check2"}>チェック1</label>

後は、CSSの実装!(Sassの記法になってます)

コピペOKです!Sassの記法になっているので、ご注意ください。

input[type="checkbox"] {
    display: none; // 元々のcheckboxは消しておきます。

  & + label { //「+」は、その要素の隣を意味するので、inputの横にあるlabelを指定してます。
   position: relative;
    vertical-align: middle;
    cursor: pointer;

    // スライドボタンの背景
    &::before {
      content: "";
      position: absolute;
      display: block;
      top: 50%;
      right: -40px;
      transform: translateY(-50%);
      border-radius: 10px;
      width: 28px;
      height: 12px;
      background-color: gray;
    }

    // スライドボタンの丸部分
    &::after {
      content: "";
      position: absolute;
      display: block;
      top: 50%;
      right: -27px;
      transform: translateY(-50%);
      height: 16px;
      width: 16px;
      border-radius: 50%;
      background-color: white;
      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
      transition: transform 0.2s ease; // transitionでゆっくりボタンが動くようにしてます。
    }

  // チェックされたとき
   &:checked + label {
      &::before {
          background-color: blue;
      }
      &::after {
          transform: translate(15px, -50%);
      }
   }
}

以上です!

カラーを変えると雰囲気が変わるので、ぜひやってみてください。

labelを押しても、ボタンを押してもちゃんとチェックが入るはずです。いろんな場面で使ってみてください。

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