switch buttonを複数並べて表示すると他の要素に反応してしまう

Question

困っていること

switchボタンを以下のような形で実装したのですが、同一ファイルにswitchボタンを2つ以上あると上のswitchボタンを押しているの下のswitchボタンが反応してしまう

解決したいこと

押したswitchボタンを対象にon/offになるようにしたい（他のswitchボタンが反応しないようにしたい)

    <div class="form-group">
      <div class="toggle">
        <input class="switch toggle-input" type="checkbox" />
        <label class="toggle-label" />
      </div>
    </div >
    <div class="form-group">
      <div class="toggle">
        <input class="switch toggle-input" type="checkbox" />
        <label class="toggle-label" />
      </div>
    </div >

.toggle input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.toggle label {
  width: 60px;
  height: 30px;
  background: #ccc;
  position: relative;
  display: inline-block;
  border-radius: 46px;
  transition: 0.4s;
  box-sizing: border-box;
}
.toggle label:after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}

.toggle input:checked + label {
  background-color: #4BD865;
}
.toggle input:checked + label:after {
  left: 30px;
}

動くサンプル
codepen

Answer 1

inputタグに適用しているこのswitch toggle-inputクラスの中身が適切じゃないですね。
inputタグの画面上での範囲をブラウザの開発者ツール等で覗いてみて下さい。
画面全体を覆っています。

参考：Windows版Chromeの開発者ツールのスクショ。下のコードが灰色になっている箇所が、上の青く覆った領域になっているのが確認できます。

検索:chrome 開発者ツール 使い方

cssのz-indexを使わない限りは、後勝ちで前面に来ます。
上のスイッチ（1つめのinput）の範囲が下のスイッチの範囲よりも背面に入っている為
下のスイッチしか反応しないという状態になっています。
（2枚のカードを重ねて、上のカードだけを触っているいえば伝わるでしょうか）

それから前後関係を解消してもposition: absolute指定による弊害が出ると思います。

なので、ポイントとしてはcssにおける
タグの範囲を決める要素 と タグの位置を決める要素 に注力すると良いかと思います。

Comments

[nanase21]

ありがとうございます。
解決出来ました