0
私は画像でスタイル付けされたチェックボックスを持っているフォームを持っています。 Chrome、FF、Edgeではうまく動作しますが、IEでは動作しません。IE上のフォーム内でチェックボックスの画像のスタイルが正しく機能しない
基本的に、CSSスタイリングは、チェックボックスがフォーム内にないときにIEでどのように動作するように動作しますが、フォームタグが周囲に移動すると、正しく動作しなくなります。代わりに、チェックされた効果を得るために画像をクリックするのではなく、画像の横をクリックする必要があります。
誰でも私がIEで正しく動作させるために必要なことを教えてください。 私はIE 11でそれを試してみました。なぜフォーム内で動作させると動作が変わるのですか？
私は自然なコーダーではありません。下のCSSのほとんどは、私がここで見つけた別の質問に適合しています。
Jsfiddle - https://jsfiddle.net/vpLf8vpw/5/
HTML
<form>
<input id="cb1" name="product1[]" type="checkbox" value=" Classic switch" />
<label for="cb1">
<img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="" />
</label>
<input id="cb2" name="product2[]" type="checkbox" value=" Right angle switch" />
<label for="cb2">
<img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="" />
</label>
<input id="cb3" name="product3[]" type="checkbox" value=" Adaptor" />
<label for="cb3">
<img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="" />
</label>
<input id="cb4" name="product4[]" type="checkbox" value=" Blow switch" />
<label for="cb4">
<img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="" />
</label>
<input id="cb5" name="product5[]" type="checkbox" value=" Cable" />
<label for="cb5">
<img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="" />
</label>
CSS
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
border: none;
padding: none;
display: block;
position: relative;
margin: none;
cursor: pointer;
}
label img {
height: 125px;
width: 125px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked + label img {
transform: scale(1);
box-shadow: 0 0 20px #ff0;
z-index: -1;
}
感謝。私は検索しましたが、それを見つけませんでした。問題が解決しました！ –