iOSのフォーム（inputやtextarea）要素に標準で適用されているボックスシャドウですが、フォームを自作でデザインする際などに、CSSにbox-shadowを指定してもボックスシャドウが無効にできない時の解決方法になります。

見た目から推測すると、iOSのinput要素には、CSSで「box-shadow」が標準で適用されているように思えるのですが、実際に適用されているのはグラデーションを指定する時に使う「-webkit-gradient」です。

以下、CSSでWebkit向けのベンダープレフィックスを使用した変更方法にりますので、iOSでSafariやChromeでの表示結果を確認しながら作業してください。

グラデーション（シャドウ）の量や濃さは「-webkit-gradient」で調整

グラデーションの量や濃さを変更するのであれば「-webkit-gradient」を使用して調整します。

また、グラデーションを隠すのであれば、背景色（白：#FFFFFF として）に合わせて、以下のようにします。

【グラデーションが指定されている要素】

• 入力ボックス：input[type=”text”]
• テキストエリア：textarea
• ボタン：input[type=”submit”]

CSS

input[type="text"], textarea, input[type="submit"]{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#FFFFFF));
	background-image: -webkit-linear-gradient(left, #FFFFFF, #FFFFFF);
}

標準で適用されているUIを無効にする場合は「-webkit-appearance」

一から自作でデザインする時などは一度、標準で適用されているUIを無効にすると作業が楽になります。

CSS3のappearanceプロパティは標準的なUIを表現するもので、noneに設定することでデフォルトで設定されているグラデーションなどを無効にすることが出来ます。

変更を行う際の要素の指定は、idやclassを付けてピンポイントで行うようにしてください。
指定が甘いと意図していない箇所まで無効になる可能性があります。

【グラデーションが指定されている要素】

• 入力ボックス：input[type=”text”]
• テキストエリア：textarea
• ボタン：input[type=”submit”]

CSS

input[type="text"], textarea, input[type="submit"]{
	-webkit-appearance: none;
}

以上、「CSS：iOSのフォームのボックスシャドウはbox-shadowではなかった件」でした。