LoginSignup
1
2

More than 5 years have passed since last update.

IE8では不可視のinputをlabelで操作出来ない件

Last updated at Posted at 2016-09-03

ほぼタイトルで落ちているが。

ラジオボタンに好きなスタイルを適用するのにlabelと隣接セレクタを使っていたページがあった。
ラジオボタンの切り替えで非同期にコンテンツを切り替える仕組み。
これを急遽IE8対応させねばならなくなったが、IE8では隣接セレクタは使えないため、display:blockにして背景に画像を仕込んだlabelをクリックしてもlabelが選択状態にならないのは良いのだが、コンテンツが切り替わらないのは納得がいかず、調べてみるとIE8ではラジオボタンが不可視だとlabelをクリックしても選択状態が切り替わらない事が判った。
因みに、display:noneでもvisibility:hiddenでもダメ。そしてIE8にopacityはない。
さしあたってはzoom:0.001で動いたのでこれで対処した(0だと無効)。

追記

思いついて試してみたらposition:absolute;z-index:-1;で動くのでこれが良さ気。

実証コード

IE8で不可視のinputがlabelで操作できない件 - js do it
http://jsrun.it/hadakadenkyu/u13k/

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2