0

我正在使用 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 中有效！

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

4

1 回答 1

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/

于 2012-02-10T04:37:28.580 回答