スポンサード

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

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

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

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

input[type=text]	{
    font-size : 16px;
    border : 1px solid #ccc;
    -webkit-border-radius : 0;
    -webkit-appearance : none;
    -webkit-tap-highlight-color : rgba(0,0,0,0);
}

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

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

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

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

ボーダーを変える

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

角丸を消す

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

フォーム内の影を消す

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

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

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


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

スポンサード