Google Chromeでチェックボックスが出ない場合はCSSのiOS対応用記述をチェック

またiOS対応用の記述の弊害にやられてドハマりしてしまいました・・・。

ただでさえブラウザ毎のデザインや位置に違いが生じやすいチェックボックスですが、今日発生したバグは「チェックボックス自体が出ない」というもの。

正確には出てはいるのですが極小で選択しても反応しませんし色々とおかしい・・・。

結論からいうとこれは以下の記述の弊害であることが判明しました。

* {
	-webkit-appearance: none;
}

iOS上のブラウザではこの記述がないとOS側のデフォルトフォームデザインも適用されてしまいフォームデザインがおかしなことになってしまいます。

・・・そうなんです、原因はわかったところでスマホのことを考えるとこの記述を外すわけにはいかないんですね。

どうしようかと悩みましたが最終的にはCSSのMedia Queryでスマホサイズの場合のみこの記述を適用することで対応しました。

@media screen and (max-width: 700px) {
	* {
		-webkit-appearance: none;
	}
}

iOS対応がらみのCSSで問題になるのはこちらの記事に続き二度目ですが、もう本当に勘弁してほしいですよね・・・。