[CSS]iOSのテキストフォームの角丸や影を消すなどデザインを変更する方法

iOSでテキストフォームを見ると、デフォルトで角丸だったりシャドウ（影）が掛かっていたりしますので、サイトに合わせてフォームのデザインを変更した場合が多々有ります。

今回はiPhoneやiPad向けに、input[type=text]のデザインをCSSで補正する方法をまとめました。

CSSでフォームの角丸や影を消す

まずはCSSの記述例から紹介します。

何をしたいかということを以下にまとめています。

フォームタップ時のズームを回避

テキストフォームにfont-size : 16pxを指定して、フォームタップ時に画面がズーム（テキストが拡大）してしまうのを防ぎます。

サイトのデザインに依りますので必須の記述ではないですが、この問題に関する回避策は別途こちらのiOSでフォームにフォーカスした時の自動ズーム問題を回避する方法 の記事でも紹介していますので、合わせて参考にしてみてください。

ボーダーを変える

borderプロパティでお好みの線の太さ、色に変えます。

角丸を消す

border-radius : 0で角丸がなくなり、四角のフォームになります。

フォーム内の影を消す

フォーム上部にうっすらと落ちる影を-webkit-appearance : noneで消します。

フォームタップ（リンクタップ）時の影を消す

-webkit-tap-highlight-color : rgba(0,0,0,0)で、フォームをタップした時に背景に掛かるグレーの影を消します。


ユーザビリティやサイトのデザイン上、必要でないものも含まれるかもしれませんが、カスタマイズの参考にしていただければと思います。