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

村上 著者:村上

【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)

著者について

村上

村上 administrator