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要素の下に置いてレイアウトする。
修正したチェックボックス
結果が以下の二つ。
1.最初のCSSに近い方法
See the Pen design checkbox for IE11 by blue (@aoiBlue) on CodePen.0
2.疑似要素を使う方法
See the Pen design checkbox for IE11 by blue (@aoiBlue) on CodePen.0
box-shadowとborderを使ってデザインするのが、
一番コードが短くていいなと思っていたけど、
IE11の壁にぶちあたってしまった。
とはいえ、Googleはモバイルファーストで行くらしいし
一番最初の方法はAndroid,IOSどちらも大丈夫なので、
あまりシェアの回復は無さそうなIE11は見捨てる選択肢もありかもしれない。
-
前の記事
FE風花雪月 紋章考察その後と海外考察を読む 2018.07.17
-
次の記事
BashコマンドTips2 2018.07.18
コメントを書く