ラジオボタンを画像にして、画像選択時にボーダーをつけて表示を変更したいですが、うまく動作しません。

前提・実現したいこと

ラジオボタンを画像にして、画像選択時にボーダーをつけて表示を変更したいです。

発生している問題・エラーメッセージ

iPhone Safariで確認したとき、1つ目と2つ目の要素は選択時に青い罫線で囲まれ、正常に動作します。ですが、3つ目と4つ目の要素はタップしても反応しません。

chormeの検証ツールでは問題なく動作します。

わかる方いらっしゃいましたら、是非お力おかしください。
何卒宜しくお願い致します。

該当のソースコード


/* html */

            <div class="selection-group">
                <input id="bg1" type="radio" name="bg" value="a" checked="checked">
                <label for="bg1" onclick="">
                    <img src="img/sample1.png">
                </label>
                <input id="bg2" type="radio" name="bg" value="b">
                <label for="bg2" onclick="">
                    <img src="img/sample2.png">
                </label>
                <input id="bg3" type="radio" name="bg" value="c">
                <label for="bg3" onclick="">
                    <img src="img/sample3.png">
                </label>
                <input id="bg4" type="radio" name="bg" value="d">
                <label for="bg4" onclick="">
                    <img src="img/sample4.png">
                </label>
            </div>


/* css */

.selection-group label img {
  padding: 8px;
  width: 100%;
  border: 1px solid #f1f1f1;
  border-radius: 4px;
}

.selection-group label {
  width: 48%;
  margin-bottom: 16px;
  display: inline-block; 
  cursor: pointer;
}

.selection-group {
     display: inline-flex;
     flex-wrap: wrap;
     justify-content:space-between;
     margin-bottom: 16px;
     width: 100%;
}

.selection-group input[type="radio"] {
  display: none;
}

.selection-group input[type="radio"]:checked + label img {
  display: inline-block; 
  background: #e2f0f5;
  border-radius: 4px;
  border: 1px solid #00ACEE;
}

行動規範の内容に同意します

回答1件

ベストアンサー

<label>の中に<input type="radio">を含めると、
<label>内の文字などどの要素をクリックしても<input type="radio">の選択 / 非選択が切り替わります。

display: none;でうまく行かない場合、position: absolute; + opacity: 0;を試してみてください。

HTML
1            <div class="selection-group">
2                <label for="bg1" onclick="">
3                    <input id="bg1" type="radio" name="bg" value="a" checked="checked">
4                    <img src="img/sample1.png">
5                </label>
6                <label for="bg2" onclick="">
7                    <input id="bg2" type="radio" name="bg" value="b">
8                    <img src="img/sample2.png">
9                </label>
10                <label for="bg3" onclick="">
11                    <input id="bg3" type="radio" name="bg" value="c">
12                    <img src="img/sample3.png">
13                </label>
14                <label for="bg4" onclick="">
15                    <input id="bg4" type="radio" name="bg" value="d">
16                    <img src="img/sample4.png">
17                </label>
18            </div>

CSS
1
2/* .selection-group input[type="radio"]:checked + label img { */
3.selection-group label input[type="radio"]:checked + img {
4  display: inline-block; 
5  background: #e2f0f5;
6  border-radius: 4px;
7  border: 1px solid #00ACEE;
8}