googleカスタム検索 ボタンがずれる

よろしくお願いします。
yahooカスタム検索のサービスが終了するとのことでgoogleカスタム検索を試しているのですが、
テキストエリアとボタンが微妙にずれてしまいます。

上のラインは合っているのですが、下のラインがボタンが1pxほど大きいため、
ずれて見えてしまいます（画像添付のとおり）。

cssでその差（テキストエリアとボタンの高さをそろえて上下のラインもそろえる）を
修正したいのですがどのように記述すれば良いのでしょうか？
ご教授頂けましたら幸いです。

なお、当方がgoogleカスタム検索を利用するにあたり
cssをカスタマイズしたのは現時点では下記のコードのみです。

/* 検索窓の余白管理 */
.gsc-control-cse {
padding: 0em!important;
}
.gsc-search-box {
margin: 0 !important;
padding: 0 !important;
}

以上、よろしくお願いします。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2019/02/14 15:25

No1です。

構成が不明なので、何とも言えませんが・・・

＞もしくはマージンなどを変えられて見栄えを整えることができるのでしたら助かるのですが

ダメもとで、

.gsc-input-box { margin-top: 2px; }

とかを試してみる価値はあるかも知れません。
（数値は適当に調節）

この回答へのお礼

おかげさまで解決しました！
お教えいただいた方法をもとにボタンのサイズも変更すると、テキストエリアとボタンがぴったりと並びました。

.gsc-input-box {
margin-top: 3px !important;
}
.gsc-search-button {
height:25px !important;
}

ご回答、誠にありがとうございました！

お礼日時：2019/02/14 15:58

No.1 回答者： fujillin 回答日時： 2019/02/14 10:18

こんにちは

要素構成やレイアウト方法が不明な状態では、なんとも・・・

＞cssをカスタマイズしたのは現時点では下記のコードのみです。
それをはずしても（＝そもそも最初から）、ずれている状態なのでしょうか？
・・・であるなら、googleさんにクレームしてみるとか。

この回答へのお礼

ご回答誠にありがとうございます。
仰せのとおり、問題切り分けのためcssのファイル自体を削除しましたが同じ現象でした。。。

> （＝そもそも最初から）

どうやらそれらしいです。
只今、カスタム検索のコントロールパネル内でフォームのデザインを確認するとそれもまったく同様にずれてました；

.gsc-control-cse のように、googleカスタム検索のスタイルを継承してボタンの幅、
もしくはマージンなどを変えられて見栄えを整えることができるのでしたら助かるのですが。。。

お礼日時：2019/02/14 11:06