デザインの崩れたGoogleカスタムサーチエンジン

なぜ崩れるのか

結論から言えばCSSのbox-sizingの値によって崩れる。 特にBootstrapを使ってるサイトで崩れることが多いんじゃないでしょうか。

なぜならBootstrapはワイルドカードでこういう設定がされているから。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

該当ソースはこの辺?

bootstrap/scaffolding.less at e38f066d8c203c3e032da0ff23cd2d6098ee2dd6 · twbs/bootstrap

border-boxのほうが扱いやすいことが多いので、この設定に対して文句とかはないし、こうあるべきだと思う。

崩れを直す方法

というわけで、カスタム検索のスクリプトを特定のタグで囲んで、そのタグに対してワイルドカードでbox-sizingの値を指定してしまえば直る。

.cse-wrapper * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

ワイルドカードは使いたくないけど、しょうがない。 ベンダプレフィックスはなくてもよさそう。

この事象について

結構ありがちな話らしい。 探せば同様の事象について掲載している記事もあるけど、 HTMLをベタで書くという解決方法なので、根本的な解決ではないように思う。

GoogleもHTMLベタでやっていいよとは言ってるが、Googleカスタム検索の管理画面から発行できるのはコードだし、 Google自身もこう書いている。

HTML フォームを使用した検索ボックスの作成 - カスタム検索 ヘルプ

HTML フォームのコードは利便性のためにのみ提供されています。Google カスタム検索ではこの問題に対するサポートは提供しておりません。すべての無料の検索エンジンに Google ブランドを表示する必要があります。

確かに、JSでのレンダリングだと目に見えて遅延するから、直接置きたくなる気持ちもわかる。