1

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

我进行了多次搜索，我找到了这个样式属性：“-webkit-appearance:none”，在下拉列表的类中，我已经放置了这个属性，并且箭头已经使用谷歌浏览器消失了。

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

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

火狐浏览器 这是没有箭头的下拉菜单的 chrome 视图： chrome_view

我的问题是：

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

4

3 回答 3

4

-webkit前缀属性仅受 Safari 和 Chrome 尊重，对于 Firefox，您需要使用-moz前缀。当您使用 时-webkit，Firefox 将跳过该属性并继续前进，从而破坏您的select设计。

不过，您可以通过 lil hack 实现上述目的，使用 a 包装您的select标签div，为您的标签分配固定宽度div，然后将其greater width用于您的select标签。现在background-image用于您的选择，并overflow: hidden;用于包装器

演示

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。

于 2013-09-12T08:27:20.090 回答
3

你可以试试运气：

-moz-appearance: none

但这是一个非标准属性..

你可以在这里阅读更多关于它的信息

于 2013-09-12T08:28:01.807 回答
1

例如：

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

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

于 2015-05-20T13:51:04.850 回答