【问题标题】:How to hide the border and background color of the drop-down arrow of a HTML <select> element?如何隐藏 HTML <select> 元素的下拉箭头的边框和背景颜色?
【发布时间】:2011-09-08 22:29:26
【问题描述】:

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

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

【问题讨论】:

  • 不知道我是不是傻,但我看不出你在说什么。
  • @lonesomeday 它是时事通讯表单中的国家/地区字段

标签: css windows firefox firefox4


【解决方案1】:

您看到的不是选择,而是一个输入字段,旁边有另一个图像类型的输入字段。图像输入充当表单的提交按钮。他们的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 插件。然后你可以右键单击任何元素并检查它。

【讨论】:

  • 我说的是 Mozilla.org 中心的下拉列表,而不是搜索框。我已经编辑了问题以使其更清楚。很抱歉造成混乱。
【解决方案2】:

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

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

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

【讨论】:

  • 发现了两件事:1.在CSS中放入border: none实际上使边框箭头成为箭头。 2. 箭头是非样式的。
  • 是的,我还发现一旦组合不是原生的(箭头按钮不透明),你就不能用 css 覆盖再次使其原生。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2019-05-03
  • 1970-01-01
  • 1970-01-01
  • 2020-01-12
  • 1970-01-01
  • 1970-01-01
  • 2011-10-10
相关资源
最近更新 更多