CSS トグルスイッチ プロの方教えて下さい

Question

前提・実現したいこと

トグルスイッチを作ってます
スイッチを2個置いて、それぞれ別の画像を設定したいんですが、
下記コードだとlabelという部分のCSSの書き方を変えるんだと思いますが、
書き方がわからずにいます
別々の画像を設定するにはどうしたらいいでしょうか？

現在のコード

<style>
body,html{
  background-color:black;
  height:100%;
}
.a {
  position: absolute;
  left: 0;
  top: 0%;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
label {
  background-color:red;
  width: 90%;
  height: 75%;
  position: relative;
  display: inline-block;
  border-radius: 5px;
  transition: 0.2s;
  box-sizing: border-box;
}
#toggle1 + label:after {
  background-image:url('https://pics.prcm.jp/63a6a9d594d2a/77587568/png/77587568_480x480.png');
  background-repeat:no-repeat;
  background-position:100%;
  background-size:80% 80%;
  content: "";
  position: absolute;
  width: 30%;
  height: 100%;
  border-radius: 50%;
  left: 0;
  top: 0;
  z-index: 2;
  transition: .1s;
}
#toggle2 + label:after {
  background-image:url('https://pics.prcm.jp/63a6a9d594d2a/77587568/png/77587568_480x480.png');
  background-repeat:no-repeat;
  background-position:100%;
  background-size:80% 80%;
  content: "";
  position: absolute;
  width: 30%;
  height: 100%;
  border-radius: 50%;
  left: 0;
  top: 0;
  z-index: 2;
  transition: .1s;
}

#toggle1 +.a:checked + label:after {
  content: "";
  background-image:url('https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678087-heart-512.png');
  background-repeat:no-repeat;
  background-position:100%;
  background-size:80% 80%;
  left: 75%;
}

#toggle2 +.a:checked + label:after {
  content: "";
  background-image:url('https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678087-heart-512.png');
  background-repeat:no-repeat;
  background-position:100%;
  background-size:80% 80%;
  left: 75%;
}
.toggle-switch {
  position: relative;
  width: 80%;
  height: 20%;
}

</style>

<div class="toggle-switch">
  <input id="toggle1" class="a" type="checkbox">
  <label for="toggle1"></label>
</div>

<div class="toggle-switch">
  <input id="toggle2" class="a" type="checkbox">
  <label for="toggle2"></label>
</div>

Answer 1

まず、提示のHTMLですが、idは重複できないので、input の id はそれぞれ別にする必要がありますね。
labelのforもそれに合わせます。

<div class="toggle-switch">
  <input id="toggle1" class="a" type="checkbox">
  <label for="toggle1"></label>
</div>

<div class="toggle-switch">
  <input id="toggle2" class="a" type="checkbox">
  <label for="toggle2"></label>
</div>

そのうえで、CSSではidを基準にしたセレクタでそれぞれ画像を設定すればいいでしょう。

#toggle1 + label:after {
  background-image: url('img1.png');
}
#toggle2 + label:after {
  background-image: url('img2.png');
}

CodePenサンプル

Comments

[zawa0]

追記しました

画像を別に設定できていない、checkedが動かない形になってしまいました

[zawa0]

わざわざありがとうございます
しっかり動いています
参考にして勉強させていただきます

[hatena19]

CodePenのサンプルへのリンクを回答に追記しましたので、確認ください。

[zawa0]

<div class="toggle-switch">
<input id="toggle1" class="a" type="checkbox">
<label for="toggle2"></label>
</div>
<div class="toggle-switch">
<input id="toggle2" class="a" type="checkbox">
<label for="toggle2"></label>
</div>

<input id="toggle1" class="a" type="checkbox">
<label for="toggle2"></label>になってるのはなぜでしょうか？
<input id="toggle1" class="a" type="checkbox">
<label for="toggle1"></label>ではないんでしょうか？

[zawa0]

onにした場合にcontentでon
offの時はoff、画像も切り替えたいのですが、
下記では動かないのはなぜでしょうか？

.a:checked + label:after {
content: "on";
background-image: url('https://placehold.jp/150/1ce375/ffffff/480x480.png?text=on');
left: 75%;
}
.toggle-switch {
position: relative;
width: 80%;
height: 20%;
}

#toggle1 + label:after {
content: "off";
background-image: url('https://placehold.jp/150/1ce375/ffffff/480x480.png?text=off');
}

[zawa0]

＆＃３９；に変換されましたが'です

[hatena19]

<label for="toggle2">の部分はタイプミスです。

ON/OFF と 画像の切り替えはサンプルを修正しましたので参考にしてください。
https://codepen.io/hatena19/pen/yLaGYNj

[zawa0]

お手数をおかけします。。。
動きました
後手で申し訳ないのですが、
2個あるトグルスイッチの文字もそれぞれ別にしたいと考えてます
1個目ON1 OFF1
2個目ON2 OFF2
のようにすることは可能でしょうか？

[hatena19]

画像の設定と同じ考え方でいけます。
idで始まるセレクタで content を設定します。

#toggle1 + label:after {
content: "OFF1";
background-image: url('img1-off');
}
#toggle1:checked + label:after {
content: "ON1";
background-image: url('img1-on');
}

Answer 2

CSS も HTML も、label1、label2 というように、classやid、labelを分けて記述すれば良いと思いますよ。

CSS も HTML も、toggle1、toggle2 というように、classやid、labelを分けて記述すれば良いと思いますよ。

Comments

[zawa0]

追記しました

[_whitecat_22]

失礼しました。修正するのは、class やid label(for)の toggle のほうですね。
⇒ toggle1、toggle2
※回答も修正しておきます。