0

これは非常に簡単かもしれませんが、自分のサイトcssでGoogleカスタム検索バーAPIをカスタマイズする方法がわかりません。幅が制限されたいくつかの事前定義されたcssクラスを適用しようとしdivましたが、検索バーはまだスタイルが崩れているiframeようです。

これは私のコードです：CSSを適用するにはどうすればよいですか？ 

<html>
    <head>
        <div width="100%" id="cse" style="width: 100%;">Loading</div>
        <script src="http://www.google.com/jsapi" type="text/javascript">
        </script>
        <script type="text/javascript"> 
            google.load('search', '1', {language: 'en', style: google.loader.themes.V2_DEFAULT});
            google.setOnLoadCallback(function() {
                var customSearchOptions = {};
                var customSearchControl = new google.search.CustomSearchControl('009437919812836441502:rka9ujkwvwe', customSearchOptions);
                customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); 
                customSearchControl.draw('cse');
            }, true);
        </script>
    </head>
</html>

それとも可能ですか？

4

2 に答える 2

1

試したCSSのサンプルコードをもっと教えていただければ、それがどこで機能していないかがわかります。これは、検索バーの幅を制限するために行ったことです。

#cse .gsc-search-box {
   width: 200px;  
}​

JSFiddle:コード例

あなたの CSS スタイルは、Google コードのスタイルよりも十分に特異性が高くないと想定しているため、適用されたスタイルが表示されないのはそのためです。スタイルを機能させるには、CSS スタイルに Google よりも大きな CSS 固有性が必要です。（参考：CSSの特異性：知っておくべきこと）

それがあなたが前進するのに役立つかどうか教えてください。

于 2012-12-21T15:28:15.203 に答える
0

私の最初の提案は、本文以外の HTML を<head>. つまり、<div>持っている を head から<body>tag に移動します。

次に、Google のカスタム検索ボックスのスタイルを確実に設定できます。Chrome の Web Developer Tools や Firefox の Firebug など、DOM を検査できるものを使用する必要があります (ただし、Firefox の組み込みツールも今ではまともです)。Google はその div を使用してサイトにフックし、JavaScript を介してより多くの DOM 要素を配信します。検索ボックスが読み込まれた後、開発者ツールを使用して検査し、挿入された他のすべての要素を確認できます。

スタイルを設定するために使用する主要な要素はすべて、.gsc-inputクラスに関連しています。これらのスタイリングについて説明している Google ドキュメントがサポートされています。後でリンクを使用してこの投稿を見つけて編集しようとします。カスタム検索ボックスと結果のスタイル設定の Google の例を次に示します。

于 2012-12-21T15:33:50.833 に答える