如何在Chrome浏览器中隐藏<select>下拉箭头

Question

如何在Chrome中隐藏下拉菜单的箭头？

在火狐上可以通过以下方式实现：

-moz-appearance: none;

但我不知道在Chrome上怎么做。 有什么想法吗？

非常感谢。

- Jose

Answer 1

使用appearance: none;及其各种前缀版本可以在不同的浏览器中实现此效果。

select {
   -o-appearance: none;
   -ms-appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

- chriskirknielsen

---

这个解决方案的问题在于它消除了箭头，但也消除了可选择元素的文本...？尝试在[链接]（https://www.santullano.com/producto/s03/）上隐藏“Ebano Arrow”。 - Jose

你的 select#pa_finish option 选择器上有一个 display: none !important。这会导致选项消失，并与使用 appearance: none; 无关。 - chriskirknielsen

我确实希望选项消失，因此我有以下代码：select#pa_finish option{ display:none!important; }但是我也想让箭头消失...两件事情。 - Jose

那么这就是预期的结果。请注意，select 仍然显示默认选定的值，除非我漏掉了什么。最初的问题是要删除箭头，而我的答案提供了解决方案。此外，请避免链接到外部网站。您必须在帖子本身中提供代码。 - chriskirknielsen

对我来说，你的解决方案不起作用。让我们看看我是否能够解释清楚我想要实现的目标（但我仍然无法理解）：1- 隐藏选项（为此，我使用 select # pa_finish option {display: none! Important;}（尽管现在我已经删除了它，以免在我的解释中被忽略）。 2- 保持所选选项的文本可见 3- 删除箭头。如果我使用（对于Chrome）-webkit-appearance: none;，那么这是唯一一个在Chrome中起作用的前缀，它会隐藏箭头（但不仅仅是箭头）：也会隐藏默认选项的文本。 - Jose

如果将option的设置设为display: none;，它们不出现是正常的。虽然在Chrome上我可以看到它们，但Firefox似乎需要在select上设置一个高度（例如height: 20px;）才能使文本重新出现，而Safari则完全忽略这一点。我的建议是使用hidden属性来隐藏option标签，而不是在CSS中隐藏它们。 - chriskirknielsen

Answer 2

就像前缀-moz专门针对Firefox（和其他Gecko浏览器）一样，您要寻找-webkit前缀来针对Chrome和Safari等WebKit浏览器。

使用-webkit-appearance: none可以隐藏<select>下拉菜单：

select {
  padding: 5px;
  -webkit-appearance: none;
}

<select>
  <option>One</option>
  <option>Two</option>
</select>

请注意，这些供应商前缀是特定于其相应的浏览器的，因此如果您像上面那样应用了 -webkit-appearance: none，则下拉列表将在 Chrome 上被隐藏，但在 Firefox 上仍然可见。

- Obsidian Age

---

这个解决方案的问题在于它消除了箭头，但也消除了可选择元素的文本...？尝试在[链接]（https://www.santullano.com/producto/s03/）上隐藏“Ebano Arrow”。 - Jose

@Jose - 从我上面的示例中可以看出，可选择元素的文本并没有被-webkit-appearance-none隐藏。如果您的文本被隐藏了，那么您可能有另一个规则导致了这种情况。然而，我不会仅仅为了找出您的规则是什么而点击外部链接（可能会携带病毒）。如果您能够在最小化、完整和可验证的示例中突出显示问题，那么请务必这样做，但现在我认为-webkit-appearance-none就足够了。 - Obsidian Age