无法让原始选择下拉箭头在 Mozilla 中消失

Posted 2023-03-05

【中文标题】无法让原始选择下拉箭头在 Mozilla 中消失

【英文标题】：Can't get original select dropdown arrow to disappear in Mozilla

【发布时间】：2012-09-23 11:34:04

【问题描述】：

我制作了一个自定义选择框，带有一个自定义下拉箭头，它在 Google Chrome 和 Safari 中看起来不错，但在 Mozilla（奇怪）和 Internet Explorer（不那么奇怪）中，原始箭头仍然存在新的。

这是 CSS 样式：

    .sb2_panes select 
        padding-top: 5px;
        padding-bottom: 5px;
        padding-right: 20px;
        margin: 0;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        background: url(img/search_arrow.png) no-repeat right #f8f8f8;
        color: #888;
        border: none;
        outline: none;
        display: inline-block;
        -webkit-appearance: none;
        -moz-appearance: normal;
        appearance: normal;
        cursor: pointer;
    

这是它在 Google Chrome 中的样子：

这是 Mozilla 中的样子：

谢谢。

【问题讨论】：

你试过了吗：-moz-appearance: none;？

其实上面的行不通。这似乎是 Firefox 的一个错误。我认为这篇文章可以帮助解决这个问题：***.com/questions/6787667/…

感谢您的帮助。所以.. 自 2011 年年中以来它一直在 bugzilla 上，但仍然没有被开发；杰出的。任何已知的解决方法？

我能想到的唯一一件事就是将图像向左放置几个像素，与默认箭头重叠。我已经看到它是一种“替换”上传按钮的解决方法。在这种情况下，您可能必须仅为 Firefox 浏览器指定 CSS 的那部分。如果这没有帮助，我就出去了:)

对于IE，如果设置appearance: none;会发生什么？还是ms-appearance: none？

【参考方案1】：

正如 Gunnar 所说，这仍然是 Firefox 中的一个错误 (https://bugzilla.mozilla.org/show_bug.cgi?id=649849)。

一种可能的解决方法是将select 的宽度设置为大于100% 并应用overflow: hidden。

select 
    overflow: hidden;
    width: 125%;

或者你可以使用 javascript。

【讨论】：

不，在我必须工作的限制范围内，这对我不起作用，我之前确实尝试过，但无济于事。现在我所做的是加载不同的 CSS 文件，以根据用户使用的 Web 浏览器来处理选择框的样式。因此，如果他们使用 Internet Explorer、Firefox 或 Opera，它会加载带有背景颜色的 CSS 文件，而不是自定义下拉箭头，因此至少没有两个下拉箭头；这看起来很荒谬。

除非这不是错误。选择小部件具有匿名子级，与操作系统默认的-moz-appearance 渲染完全无关。 WebKit 恰好通过它的非标准 -webkit-appearance 属性（这与非标准 -moz-appearance 属性不同）实现所有选择渲染，但按照规范，Gecko 所做的一切都很好。

【参考方案2】：

select 
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';

此代码适用于 FF

【讨论】：

不再。从 Firefox 版本。 30 这不会隐藏箭头。 support.mozilla.org/en-US/questions/1001254

@marinbgd 它似乎已恢复使用最新的 FF 版本。