搜索

首页 >web前端 >css教程 >如何在 Firefox 中隐藏 元素中的下拉箭头？

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-10-31 07:35:17751浏览

How to Hide the Dropdown Arrow in <select> Firefox 中的元素？ Firefox 中的元素？ " />

如何在 Firefox 中使用 CSS 删除

尽管 Chrome 和 Safari 使用 -webkit-appearance: button; 成功隐藏了下拉箭头，但 Firefox由于 -moz-appearance 属性的不同实现而带来了挑战。

问题：持久默认箭头

将 -moz-appearance: 按钮应用到 元素不支持 -moz-appearance: none; 。 🎜>

解决方案：CSS Hack

要在 Firefox 中隐藏下拉箭头，需要组合 CSS 属性：

<code class="css">select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}</code>
通过将 -moz-appearance 设置为 none并添加 0.01px 的微小文本缩进，将箭头推出视图之外。 text-overflow: '' 删除任何剩余的溢出文本，确保箭头保持隐藏状态。

更新：

2014 年 12 月 11 日： -moz 外观：无；现在在 Firefox 35 中可以按预期运行，无需进行黑客攻击。
2014 年 4 月 28 日：上述 CSS 黑客攻击暂时有效，但此后在多个平台的 Firefox 31.0.a1 Nightly 中重新出现。

以上是如何在 Firefox 中隐藏