Google CSE 边框不会在 IE7、8 和 9 中隐藏
我正在使用 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&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。所以有两组边界。
注意：当我从 Google 中删除 JavaScript 文件时，边框 CSS 内容可以在 IE 中运行！
任何人都可以提供任何见解吗？
I am using Google CSE and I'm using an older version of the markup. This is a simplified version of the markup:
<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&lang=en">
</script>
</div><!-- #search -->
I have custom CSS to hide the borders of the input text box and I have it all sitting in a div with a background image and such. Everything looks great in Firefox, Safari and Chrome, but in all versions of IE (7 - 9) the blue border that comes from Google won't go away! I've tried all of the following ideas:
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 */
}
Right now, the only interim solution I could come up with was to shrink the box so that - at least - the blue google borders around the text box will appear inside the div with the background image. So there are two sets of borders.
Note: When I remove the JavaScript file from Google, the border CSS stuff works in IE!
Can anyone offer any insight?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我认为你需要更改 Google 设置中的样式，因为 javascript 会覆盖样式标签。
http://code.google.com/apis/customsearch/docs/ui .html#overview_howto
否则您可以使用：
http://jsfiddle.net/Britta/sNrY9/
I think you need to change the style in Google's settings, as the javascript overwrites the style tag.
http://code.google.com/apis/customsearch/docs/ui.html#overview_howto
otherwise you can use:
http://jsfiddle.net/Britta/sNrY9/