IE11でinputタグのデザインがバグる時の対応

仕事で、チェックボックスをデザインする必要が出たものの、
IE11だけレイアウトが上手くいかなかったのでそのまとめ。

チェックボックスをラジオボタン風デザインに変える

今回やったのは、チェックボックスをラジオボックスのように見せること。
それはユーザーの混乱を招かないかという感じだけど、
デザイナーさんたっての希望なので仕方ない。

というわけで、最初に実装したのがこちら

See the Pen YvmWZy by blue (@aoiBlue) on CodePen.0

恐らく主要なブラウザも、スマホもこの実装で問題ない。
正常な状態だと以下のようになる。

が、しかしこれをIEで動かすとこのようになってしまう。

レイアウト崩れの原因と対策

まずappearance:noneが効いていない模様。
これは、単純にIEがサポートしていないだけなので
おとなしくdisplay:noneするか、position:absoluteにして押し出してしまえばよい。
が、これだとinput要素がなくなってしまうので、
隣に置いていたlabel要素で囲ってあげて、そこをクリック領域として扱う必要が出てくる。

さらに、inputは使えなくなったので、代わりにデザインを置くための要素も必要になってくる。
ここも曲者で、どうやらIEではinputやimgといった要素は本来中身が存在しないため、
疑似要素をサポートしていないようなのである。

どういうことかというと、

<input>hoge</input>
や、
<img>fuga</img>

というような使い方は想定されていないということ。

なので、inputに疑似要素を持たせてデザインする方法は却下となる。
IEで疑似要素をサポートしているものは多いが、spanを使うのが一番収まりがよいようなので、
spanをinput要素の下に置いてレイアウトする。

修正したチェックボックス

結果が以下の二つ。
１．最初のCSSに近い方法

See the Pen design checkbox for IE11 by blue (@aoiBlue) on CodePen.0

See the Pen design checkbox for IE11 by blue (@aoiBlue) on CodePen.0

box-shadowとborderを使ってデザインするのが、
一番コードが短くていいなと思っていたけど、
IE11の壁にぶちあたってしまった。

とはいえ、Googleはモバイルファーストで行くらしいし
一番最初の方法はAndroid,IOSどちらも大丈夫なので、
あまりシェアの回復は無さそうなIE11は見捨てる選択肢もありかもしれない。