浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【CSS】iOSでテキストフォームの内部の影を消す方法

前回に引き続き、CSS での影の取り扱いについて。

さて、iOS で text タイプの input 要素を表示した場合、要素内部に影が表示されていると思います。
今回は、その影を消す方法についてです。
別に影ありでも良かったのですが、Android で見ると影がないのでデザインを統一したい&input要素に指定した border の色合いが影響して謎の隙間があるように見えるため、削除することにしました。

 

影を削除するにあたり、参考にさせていただいた記事はこちらから。

CSS:iOSのフォームのボックスシャドウはbox-shadowではなかった件|PressStocker
http://pressstocker.com/ios-box-shadow/

で、今回初めて知ったのですが、iOS で input 要素に追加される影って、box-shadow プロパティによるではないんですね。
最初、影を消すために box-shadow の記述を探してしまいました…。

では何で指定しているかというと -webkit-gradient というプロパティが使われているとのこと。
なので、影の濃さなどを調節したい場合は、このプロパティの値を変更しましょう。

なお、私の場合のように、影を削除したい場合は -webkit-appearance プロパティを利用します。
影を消したい input 要素に対して下記の CSS を追加すると、サクッと影を削除できました。

-webkit-appearance: none;

 

以上、iOS で input 要素の影を削除する方法でした。
最初、box-shadow が効かない!どうすれば?となったのですが、無事解消できてよかったです。

  • この記事いいね! (0)