-webkit-appearance：Firefox浏览器不接受任何样式属性

Question

我正在建设新网站，我需要一个下拉菜单来选择我网站中的内容。但是这个下拉菜单有一个我必须要做的风格。 此下拉菜单的样式是下拉框没有箭头 - 右侧显示的箭头点击它并打开下拉项目 - 。

我做了很多搜索，我发现这个样式属性：“ - webkit-appearance：none”，在下拉列表的类中，我已经放置了这个属性，箭头已经使用谷歌浏览器浏览器消失了

但是“问题”是：这个属性在Firefox浏览器上不起作用，箭头还没有消失。

我将给你一个简单的视图，看看这个箭头在Firefox浏览器中是如何消失的：

这是没有箭头的下拉菜单中的chrome视图：

我的问题是：

是否有CSS样式属性可以在“Firefox”浏览器中创建没有此箭头的下拉菜单？

Answer 1

只有Safari和Chrome才能使用

-webkit前缀属性，对于Firefox，您需要使用-moz前缀。当您使用-webkit时，Firefox会跳过该属性并继续前进，从而破坏您的select设计。

尽管如此，您可以通过lil hack实现上述目标，使用select包裹div标记，为div指定修复宽度，然后使用greater width代码select。现在使用background-image作为选择，并使用overflow: hidden;作为包装

Demo

div {
    width: 200px;
    border: 1px solid #f00;
    overflow: hidden;
}

div select {
    width: 220px;
    background-image: url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/256/Download-icon.png);
    background-size: 13px 13px;
    background-repeat: no-repeat;
    background-position: 180px 5px;
}

这样，上面的内容将为您提供更好的跨浏览器兼容性，您也不必使用prefixes。

Answer 2

你可以试试运气：

-moz-appearance: none

但这是一个非标准的财产..

您可以阅读更多相关信息HERE

Answer 3

例如：

appearance: none;
-webkit-appearance: none; 
-moz-appearance: none;

但仍未覆盖（ 或者您可能想要使用plagin jquery https://select2.github.io/，但我认为，如果您不会只选择一个选择，则不太合适。