0

私はGoogleCSEを使用しており、古いバージョンのマークアップを使用しています。これは、マークアップの簡略化されたバージョンです。

<div id="search">
    <form action="http://www.google.com/cse" id="cse-search-box">
        <input type="hidden" name="cx" value="myaccountvalue" />
        <input type="hidden" name="ie" value="UTF-8" />

        <input class="search-input" type="text" name="q" />
        <input class="search-btn" type="image" name="sa" 
            src="path/to/my/submit-button.jpg" 
            onclick="this.submit();" />
    </form><!-- #cse-search-box -->
    <script type="text/javascript" 
        src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en">
    </script>
</div><!-- #search -->

入力テキストボックスの境界線を非表示にするカスタムCSSがあり、すべてを背景画像などのdivに配置しています。Firefox、Safari、Chromeではすべてが見栄えがしますが、IEのすべてのバージョン（7〜9）で、Googleからの青い境界線が消えることはありません。私は次のアイデアをすべて試しました。

input.search-input {
    border: none;              /* doesn't work */
    border: 0;                 /* doesn't work either */
    border-color: transparent; /* doesn't work */
    background: none;          /* doesn't work */
}

今のところ、私が思いついた唯一の暫定的な解決策は、ボックスを縮小して、テキストボックスの周りの青いグーグルの境界線が背景画像とともにdiv内に表示されるようにすることでした。したがって、2セットの境界線があります。

注：JavaScriptファイルをGoogleから削除すると、ボーダーCSSのものがIEで機能します。

誰かが何か洞察を提供できますか？

4

1 に答える 1

1

javascript が style タグを上書きするので、Google の設定でスタイルを変更する必要があると思います。

http://code.google.com/apis/customsearch/docs/ui.html#overview_howto

それ以外の場合は、次を使用できます。

input.search-input {       
    border: 0 !important;
}

http://jsfiddle.net/Britta/sNrY9/

于 2012-02-10T04:37:28.580 に答える