SafariやmacOSのChromeのinput[type=search]が装飾過多で、そのままではどうにもならないのは、-webkit-appearanceプロパティーを使ってどうにかする。しばらく前まではtextfieldにすれば済んでいたが、どうもnoneまでしないとダメになってしまったようだ。まだちゃんと調べていないが、Mobile Safari 11ではtextfieldだと内側の影や丸い角が殺せなかった。:focusの時も謎の挙動をする。
元々頑張りたい場合はnoneにしていたので、既存のプロジェクトへの影響はほとんどなかったが、最小限のCSSでやろうとしていたらハマった。もうフォーム要素はそのままにするしかなさそうだ。新しいmacOSのDark Modeの影響とか考えたくもないし……。なんかこうmanifest.jsonに書いたbackground_colorの値でうまいことやってもらうしかないし、そうなっていくのかもしれない。
ちょっとだけ設置した検索フォームは、面倒くさくなったのでまたGoogleへのリンクに戻した。🔍便利だな。