Question

我正在使用Google CSE，而我正在使用旧版本的标记。这是标记的简化版本：

<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 */
}

现在，我能想出的唯一临时解决方案是缩小框，以便 - 至少 - 文本框周围的蓝色Google边框将显示里面 div与背景图片。所以有两组边界。

注意：当我从Google中删除JavaScript文件时，边框CSS内容可以在IE中使用！

任何人都可以提供任何见解吗？

Answer 1

我认为您需要更改Google设置中的样式，因为javascript会覆盖样式标记。

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

否则你可以使用：

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

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

IE CSE边框不会隐藏在IE7,8和9中

注意：当我从Google中删除JavaScript文件时，边框CSS内容可以在IE中使用！

1 个答案: