
よろしくお願いします。
yahooカスタム検索のサービスが終了するとのことでgoogleカスタム検索を試しているのですが、
テキストエリアとボタンが微妙にずれてしまいます。
上のラインは合っているのですが、下のラインがボタンが1pxほど大きいため、
ずれて見えてしまいます(画像添付のとおり)。
cssでその差(テキストエリアとボタンの高さをそろえて上下のラインもそろえる)を
修正したいのですがどのように記述すれば良いのでしょうか?
ご教授頂けましたら幸いです。
なお、当方がgoogleカスタム検索を利用するにあたり
cssをカスタマイズしたのは現時点では下記のコードのみです。
/* 検索窓の余白管理 */
.gsc-control-cse {
padding: 0em!important;
}
.gsc-search-box {
margin: 0 !important;
padding: 0 !important;
}
以上、よろしくお願いします。

No.2ベストアンサー
- 回答日時:
No1です。
構成が不明なので、何とも言えませんが・・・
>もしくはマージンなどを変えられて見栄えを整えることができるのでしたら助かるのですが
ダメもとで、
.gsc-input-box { margin-top: 2px; }
とかを試してみる価値はあるかも知れません。
(数値は適当に調節)
おかげさまで解決しました!
お教えいただいた方法をもとにボタンのサイズも変更すると、テキストエリアとボタンがぴったりと並びました。
.gsc-input-box {
margin-top: 3px !important;
}
.gsc-search-button {
height:25px !important;
}
ご回答、誠にありがとうございました!
No.1
- 回答日時:
こんにちは
要素構成やレイアウト方法が不明な状態では、なんとも・・・
>cssをカスタマイズしたのは現時点では下記のコードのみです。
それをはずしても(=そもそも最初から)、ずれている状態なのでしょうか?
・・・であるなら、googleさんにクレームしてみるとか。
ご回答誠にありがとうございます。
仰せのとおり、問題切り分けのためcssのファイル自体を削除しましたが同じ現象でした。。。
> (=そもそも最初から)
どうやらそれらしいです。
只今、カスタム検索のコントロールパネル内でフォームのデザインを確認するとそれもまったく同様にずれてました;
.gsc-control-cse のように、googleカスタム検索のスタイルを継承してボタンの幅、
もしくはマージンなどを変えられて見栄えを整えることができるのでしたら助かるのですが。。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- Google Maps iPhoneのGoogle検索窓を通常の大きさに 戻す方法を教えて頂けませんか?(切実) 日本全国の 2 2022/10/02 02:08
- Excel(エクセル) 【Excel】指定のセル内容を基に別シートのセルを検索して選択する【VBA】 1 2022/06/16 16:16
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- その他(SNS・コミュニケーションサービス) Yahoo!とGoogle検索のしくみの違いを教えてください 2 2022/08/14 01:53
- その他(ブログ) ブログを始めたいと思うのですが、下記のような場合のおすすめブログサービスを教えてください。 収益化な 4 2023/04/10 10:01
- Yahoo!メール yahooメールの検索結果を全て表示するには? 1 2023/05/16 14:34
- Visual Basic(VBA) ユーザーフォーム「frm_基本❶」を立ち上げると新規で入力する行数を右下のNoとして表示しています。 1 2023/03/16 19:02
- その他(ブラウザ) Google検索中に… インハイTVを観たくて 情報収集のために Google検索をしていました。 2 2023/08/10 12:23
- 迷惑メール・スパム gmailの過去のメールを一括削除する方法について 3 2023/04/19 05:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルセル余白(例えば左側...
-
borderの太さを1px以下に見せ...
-
border-widthの太さ指定について
-
IEの表示崩れについて教えてく...
-
webサイトのデザイン方法について
-
レスポンシブWeb 右側の表示が...
-
PCとスマホでの解像度でのCSS振...
-
L字みたいな記号の表示
-
シーサーブログのヘッダー画像...
-
ピクチャーボックスの大きさに...
-
画像と画像の間のスペースはど...
-
画像枠線
-
影のような表現
-
MT4でのカテゴリエラー対策
-
Movable Typeの読み込み・イン...
-
web拍手のお礼画面の画像は持ち...
-
初心者です ワードプレスのfuka...
-
HTMLタグ内文字を抽出するには
-
/public_html が表示されていない
-
URL表示に関して
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルセル余白(例えば左側...
-
縦ボーダーの長さ変更方法
-
レスポンシブWeb 右側の表示が...
-
borderの太さを1px以下に見せ...
-
box-shadowでFirefoxだと内枠に...
-
テキストボックスが選択できない
-
ブログのコメント表示を変更
-
border-widthの太さ指定について
-
PCとスマホでの解像度でのCSS振...
-
googleカスタム検索 ボタンがず...
-
gooブログのフォントサイズにつ...
-
Wordpress Stinger5の記事部分...
-
テキストの表示がいきなり小さ...
-
HTMLにsvg画像表示したら小さか...
-
L字みたいな記号の表示
-
ピクチャーボックスの大きさに...
-
シーサーブログのヘッダー画像...
-
iPhoneで HTMLファイルを閲覧
-
複数の画像を1枚にしたファイ...
-
webサイトの表記を書式を崩さず...
おすすめ情報