如何隐藏 HTML

发布于 2024-11-13 09:20:04 字数 400 浏览 4 评论 0原文

我发现在Mozilla主页的中心,有一个 周围的边框。元素,箭头仍然有边框。我在 Windows 上使用 Firefox 4。

请参阅随附的屏幕截图。上半部分显示 Facebook 上的下拉列表,下半部分显示 Mozilla 上的下拉列表。

在此处输入图像描述

I found that in the center of Mozilla home page, there is a <select> element (drop-down list) whose arrow has no border and background color. While on facebook sign-up page, the drop-down arrow has the windows standard border and background color. I am wondering what makes this difference? I tried to set border to none in CSS, but it only hides the border around the whole <select> element, the arrow still has border. I am using Firefox 4 on Windows.

See attached screenshot. The upper half shows the drop-down list on Facebook, while the lower half shows the drop-down list on Mozilla.

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

自此以后,行同陌路 2024-11-20 09:20:04

select 元素的 border css 属性未被覆盖时,它会尽可能地呈现为原生(mozilla 的情况)。另一方面,当指定了 border 属性时,浏览器会尝试用边框渲染 select 并牺牲它的一些本机外观(facebook 的情况)。

或者,也许它会尝试渲染没有边框的本机组合框,然后在其周围绘制边框。无论如何,当指定边框时,组合框需要以不同的方式在窗口或浏览器上绘制。

仅供参考,我在 win7 中使用了经典主题,而 mozilla 的 select 按钮看起来就像任何其他经典 Windows 按钮:灰色和 3D:

在 mozilla 网站上选择具有经典 Windows 主题的元素

When the border css property of the select element isn't overridden, then it's rendered as native as possible (the mozilla's case). When, on the other hand, the border property is specified, browser tries to render select with a border and sacrifices some native look of it (facebook's case).

Or, maybe, it tries to render the native combobox without border and then draws border around it. Anyhow, when the border is specified, combobox needs to be drawn in different ways windows-wise or browser-wise.

And FYI, I've got the classic theme in win7 and mozilla's select button looks like any other classic windows button: gray and 3D:

select elemnt on mozilla site with the classic windows theme

风为裳 2024-11-20 09:20:04

您看到的不是一个选择,而是一个输入字段,旁边还有另一个图像类型的输入字段。图像输入充当表单的提交按钮。他们的 html 如下:

<input id="q" type="search" placeholder="Search" name="q">
<input id="quick-search-btn" type="image" alt="Search" src="/images/template/search-submit.png">

顺便说一下,如果您运行的是 firefox,我建议您获取 firebug 附加组件。然后您可以右键单击任何元素并检查它。

What you see there is not a select, but an input field with another input field of type image right next to it. The image input acts as a submit button for a form. Their html for it is as follows:

<input id="q" type="search" placeholder="Search" name="q">
<input id="quick-search-btn" type="image" alt="Search" src="/images/template/search-submit.png">

By the way, if you are running firefox, I would recommend getting the firebug add-on. Then you can right click on any element and inspect it.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文