前回に引き続き、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 が効かない！どうすれば？となったのですが、無事解消できてよかったです。
