inputに背景が勝手につくCSSの解決法

iPhoneの時だけ、どうしても余計な背景が出てきてしまう状況がありました。
input要素のボタンをテキストに変更した時にハマったことと解決策をメモしておきます。

この事象についてキーワードを並べると、

  • CSSを確認しても背景に無いもかかってない。
  • importantも効かない。
  • iOS SimulatorでCSS全部確認しても、全く背景色の要素が存在しない。
  • Androidだと背景は出てこない大丈夫。
  • 完全にはまりました。

このように、inputに背景がでてきてしまいます。
iPhoneの時だけです。Androidはの背景は#fffで白くなっている様子。

これはいわゆるCSSのリセットで解決できました。


これを入れると背景が消えました。


resetCSSとかでやっておくことかもしれないですが、
今回はでかいサイトの部分修正だったので気づきにくかったです。
背景にあったようなボタンのclassもすでにありそうなボタン要素だったので、どこかで勝手に継承してしまっているんだと勘違いしていました。

参考になるかわからないですが、この時のソースを入れておくと、こんな感じに入れてます。


よくこんな感じにリセットしておくやつですね。

ちなみに、-webkit-appearance: button;を入れる前と後では、ソースには何の変更もありませんでした。
わかりづらいですね。

変更前


変更後


CSSを修正する場合は、思い込みを外すということが大切ですね。
まいったまいった。