11

按照这个答案https://stackoverflow.com/a/17713753/407943

我尝试实施相同的解决方案，但它不适用于我的 Windows 7 Firefox 22，这就是我得到的：

在此处输入图像描述

select {
    -moz-appearance: window;
    -webkit-appearance: none;
    background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
    padding-right: 20px;
}
@-moz-document url-prefix() {
.wrapper {
     background: #f5f5f5 url("/images/arrow_down.png") right center no-repeat;
     padding-right: 20px;
  }
}

编辑：这是一个 jsfiddle http://jsfiddle.net/TBEZ/1/

4

5 回答 5

33

更新：这个技巧从 FF 30 起停止工作。到目前为止没有其他修复。请密切关注更新的完整要点。

如何删除<select>Firefox 上的箭头：

-moz-appearance:none;本身不起作用。您需要添加一些text-indent和text-overflow。像这样：

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

现场示例：http: //jsfiddle.net/joaocunha/RUEbp/1/

了解此要点的详细信息：https ://gist.github.com/joaocunha/6273016

于 2013-08-24T11:55:09.877 回答
1

这是 firefox 的一个已知错误，不会很快纠正，甚至可能更晚（参见这个bugzilla）。

有一个纯 CSS/HTML 解决方法：

HTML：

<div class="styled">
    <select></select>
</div>

CSS：

div.styled {
    overflow: hidden;
    padding: 0;
    margin: 0;
}

div.styled select {
    width: 115%;
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    -webkit-appearance: none;
    border: none;
}

小提琴

这里的问题是您必须确保文本不会太大，否则它会覆盖图像。

此外，还有 javascript 解决方案。看看customselect，这是一个 jQuery 插件，可以轻松创建您自己的选择。

另一个著名的插件：选择

于 2013-07-22T09:31:50.690 回答
0

使用 -moz-appearance: window 而不是 none 现在似乎在 FF 30 中工作

于 2014-07-01T15:44:20.837 回答
0

我在 Firefox 30+ 中使用：

-moz 外观：文本字段；

于 2015-04-22T11:48:12.213 回答
0

这是在 FF/IE/Chrome 上真正对我有用的唯一解决方案：

自定义选择下拉箭头不可点击

于 2013-07-23T13:45:34.287 回答