如何隐藏 HTML <select> 元素的下拉箭头的边框和背景颜色？答案

【问题标题】：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 覆盖再次使其原生。