IE：11.0.9600.16521
OS：windows 7 home

IEでlabelが反映されないの対処法調べても javascript で対応してるのしか見つからない。
しかもIE9で解決されているとか書いてるけど、IE11でも治ってないんですけど・・？＾＾；

みんなそれで納得してるの・・？

IEのバグにjavscript使いたくない・・。


という事でCSSだけでやってみた。


そもそも、

<div class="aa">
 <label><input type="radio" value="1" name="input" /><span></span><img src="1.jpg" /></label>
</div>

だけだったら、imgのクリックでもlabelは反応してくれる。


しかし、

<form>
 <div class="aa">
  <label><input type="radio" value="1" name="input" /><span></span><img src="1.jpg" /></label>
 </div>
</form>

とformを使用したとたん、imgをクリックしてもlabelが反応しない。
(ちゃんとカーソルはポインターになっているのに・・)


これをCSSだけで対応する。
本題です。

少し不要なのも含まれていますが


label{
position: relative;
border: 1px solid #cccccc;
height: 100px;
width: 100px;
display: block;
vertical-align: top;
}

label span{
position: absolute;
display: block;
width: 100px;
height: 100px;
z-index: 2;
}

label img{
max-width: 100px;
max-height: 100px;
z-index: 1;
}
label input{
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
}

です。

ポイントは、
label を position: relative;として positionの基準にする。
imgに z-index: 1; をつけて、同じ階層では一番下にしておく。
span を
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  z-index: 2;
として、imgの上に被せる。

inputの指定は画像の上にポチボタンを表示する指定ですが、これはとくに必要ないです。
inputの指定を無くす場合、spanの位置を変更する必要があります。


解決したでしょうか。