css - -webkit-外观 :none style property is not accepted by Firefox browser

Question

我正在构建新网站，我需要一个下拉菜单来选择我网站中内容的数量。但是这个下拉菜单有一种我必须制作的风格。这个下拉菜单的样式是下拉框没有箭头-右边出现的箭头点击它打开下拉项-。

我进行了很多搜索，我发现了这个样式属性:“-webkit-appearance:none”，在下拉列表的类中，我已经放置了这个属性，并且使用 google chrome 浏览器时箭头消失了.

但“问题”是:此属性在 Firefox 浏览器上不起作用，箭头并未消失。

我会给你一个简单的 View ，看看这个箭头在 Firefox 浏览器中是如何没有消失的:

这是 chrome View ，作为没有箭头的下拉菜单:

我的问题是:

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

Answer 1

-webkit 前缀属性只被 Safari 和 Chrome 尊重，对于 Firefox，你需要使用 -moz 前缀。当您使用 -webkit 时，Firefox 将跳过该属性并继续前进，因此它会破坏您的 select 设计。

尽管如此，您可以通过一些技巧来实现上述目标，使用 div 包装您的 select 标签，为您的 div 分配固定宽度，而不是为您的 select 标签使用 greater width。现在使用 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;
}

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