inputフォーカス時のアウトラインをbox-shadowで実装した際、iOS Safariでbox-shadowが表示されない問題が発生したので、その原因と対処法をご紹介します。

原因

初めはこのように記述していました。Chomeでは問題なくbox-shadowが表示されますが、Safariで見ると表示されていません。

ブラウザにデフォルトで指定されているスタイルが当たっていたことが原因でした。

対処法

ブラウザのデフォルトスタイルを消すために、CSSに以下を追記しました。

appearance: none;
-webkit-appearance: none;

appearanceプロパティはベンダープレフィックスと一緒に使います。

ベンダープレフィックスとは、新しいCSSプロパティを各ブラウザに認識してもらうための識別子です。

ブラウザが新しいCSSに対応していない場合、ベンダープレフィックスを使わないとエラーが起きる可能性があります。

今回はGoogle Chrome/Safari対応の-webkit-を追加しました。Firefox/Mozillaに対応させるには-moz-も追加しておきましょう。

このようにデフォルトのスタイルを解除してあげると、Safariでも無事にbox-shadowが表示されるようになりました！

まとめ

inputに限らず、フォームに使用するプロパティにはブラウザ特有のデフォルトスタイルが指定されています。

見た目をカスタマイズしたい場合は、appearance: none;でデフォルトのスタイルを解除することで、より自由にスタイリングすることができます。

select、checkbox、radio、textareaなど、他のプロパティでもぜひお試しください。

CSS