使用CSS隐藏HTML下拉选择框箭头

Question

有没有一种好的方法可以在所有浏览器中隐藏默认的下拉箭头？我知道这个问题已经被问过几次，但似乎没有解决方案适用于所有浏览器，也没有一个看起来很好。已经过去了几年，我想知道现在是否存在一个好的解决方案？

- Steve

---

创建一个像下拉菜单一样的按钮，并使用JavaScript为其添加功能，例如。 - baao

@baao不幸必须是一个选择。 - Steve

你的项目不能使用JavaScript吗？我认为你不会找到一个仅使用HTML CSS的解决方案。我已经搜索了很久，我真的不喜欢select的样式。如果你可以使用JavaScript/jQuery，也许这个链接对你有用：http://harvesthq.github.io/chosen/ - baao

我基本上是将Select用作显示。我正在服务器端填充选项的值，然后客户端将使用ajax获取数据。数据将是int类型而不是String类型（无法更改）。然后我将设置Select的Value = value来显示它。我可以再发出一个请求以获取枚举列表，但...那是备用计划。 - Steve

Answer 1

我能提供的最佳方式是这样的：

    select::-ms-expand
    {
        display: none;
    }
    select
    {
        -webkit-appearance: none;
        -moz-appearance: none;      
        appearance: none;
        padding: 2px 30px 2px 2px;
        /*border: none; - if you want the border removed*/
    }

这在Chrome和IE中可行。

但不幸的是，在您的情况下，-moz-appearance:none似乎目前不完全支持。

这里有一个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=649849，其状态为RESOLVED FIXED，但似乎取决于另一个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=1076846，其状态为NEW，希望它会很快得到解决。

- TResponse

Answer 2

https://gist.github.com/joaocunha/6273016/

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    text-indent: 0.1;
    text-overflow: '';
}

- ditto

Answer 3

对于 WebKit 浏览器来说，-webkit-appearance: none 可以移除所有默认的 select 样式。需要注意的是，虽然这种方法可靠，但它会移除所有样式，而不仅仅是箭头。目前还没有其他可靠的解决方案。

- Ian Hazzard