Webインスペクタを使って、iOS版Safariの意図しないCSSを特定する

WEBサービスをつくっているとき、iPhoneやiPadのSafariブラウザ（iOS版Safari）でだけ意図しないスタイルが付いてしまうことがあります。大抵は先人が調べてくれた対処法が見つかますが、対処法が見つからなかったときはこんな風に特定したよ…の手順をまとめました。

今回調べたかったこと

datalistタグのデフォルトスタイル（ドロップダウンの矢印▼）を非表示にしたかった

デフォルトのドロップダウンの▼マークを非表示にしたかったのですが、PCのブラウザ（Safari含む）は非表示にできたのに、なぜかiOS版Safariで見たときだけ▼マークが消えない…という問題にあたりました。
Mac版Safariはこの記述で対応できたのですがiOS版では効果がなく、該当する対処法の記事も見つかりませんでした。

input::-webkit-calendar-picker-indicator {
    display: none;
}

参考: https://stackoverflow.com/questions/20937475/remove-datalist-dropdown-arrow-in-chrome

手元にMacがあったら、Webインスペクタで調べてみよう

同じSafariなのになぜ…とかなしい気持ちになりましたが、実はiPhone（iPad）とMacをUSBでつなぐと、iPhone（iPad）のSafariで開いたページをMac側の開発者ツールで調べることができます。
つなぐケーブルさえあればさくっとできるので、めげずに調べてみることにします。

[手順1]  Webインスペクタを使う準備をする

1. iPhone（iPad）の「⚙設定」アプリを開き、「Safari」→「詳細（一番下にある）」→「Webインスペクタ」をONにします
2. MacとiPhone（iPad）をUSBでつなぎます

[手順2]  iOS Safariで該当のページを開く

iPhone（iPad）のSafariで調べたいページを開いておいて、MacのSafariの開発者ツールからページを選択します。

💡 Mac版Safariに「開発」メニューがメニューバーに表示されない場合
「Safari」＞「環境設定」＞「詳細」をクリックして、「メニューバーに"開発"メニューを表示」を選択すると表示されます。

[手順3]  shadow DOMを表示する

要素 タブを開いた状態で右端にある〈〉アイコンをクリックすると、shadow DOMが見られるようになります。

📝 Shawod DOMとは
Web Components と呼ばれる、 Document Object Model (DOM) を部品化する仕組みを構成する要素のひとつで、普段の開発者ツールだと非表示になっています。ブラウザを描画する内部的なDOM/CSSを持っているので、特定のブラウザでだけ表示が違うな…と思ったときは、ここを調べてみると原因にたどり着けたりします。
参考: https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_shadow_DOM

[手順4]  該当箇所を調べてみる

該当部分のshadow DOMを見てみると、▼マークは `input::-webkit-list-button` でスタイルが当たっているのでCSSでこいつを消してやれば良さそう。

Mac側で開いた開発者ツールで値を変えるとiPhone（iPad）に反映されるので、どうやったら消えるか試してみます。

● インラインでdisplayプロパティが指定されているので、`display:none` では消えない
● `!important`もすでに付いているので効かない
● content: none でやっと消えてくれた🎩

となったので、最終的には下記のように対応しました。

// style.module.scss

input {
 
 // MacのSafari用
 &::-webkit-calendar-picker-indicator {
   display: none;
 }
 
 // iOSのSafari用
 &::-webkit-list-button {
   content: none;
 }
}

実際のサービスでは、検索履歴を表示するのに使っています。

**********

フォーム要素はブラウザごとに少しずつ表示が違うので、実機で表示チェックをしたときに「あれ…こんなはずでは😇」となることが多いのですが、

● iPhoneやiPadで意図しない表示があったら、Macとつないで開発者ツールで調べてみる
● 通常の開発者ツールで見てもおかしな箇所が見つからないときは、shadow DOMも調べてみる

を覚えておくと、解決までの時間がちょっとだけ短縮されるかもしれません。それでは良いコーディングライフを👋