iPhoneのフォーム要素にシャドウが勝手につく問題の解決法

iPhoneのChrome(WebKit?)でinput要素などでデフォルトでつく影を消す方法です。

以下をinput要素などのCSSに追記してください。

-webkit-appearance: none;

-webkit-appearanceはブラウザが実装している初期スタイルを指定できるCSSプロパティです。

上例では「none」を指定することでブラウザの初期スタイルを解除しています。

たまにこの記述をサイト全体に反映させるためにワイルドカード(*)やhtml要素のcssに記述するのを見かけますが、他の不具合が出る場合もあるのでできるだけ影を消したい当該要素のみに設定することをオススメします。

ページの先頭へ