Question

我已经设置了我的选择框，但我仍然可以在firefox的选择框中看到箭头，我已经设置了css：

background:transparent;
content:'';
apperiance:none;

这可以在Chrome上运行，但在Firefox上我仍然会看到默认箭头，也可以在Firefox上删除它吗？

Answer 1

这应删除Chrome，Firefox，Safari和IE10中的选择中的箭头。

.poa-select {
  -moz-appearance: none; 
  -webkit-appearance: none;
  appearance: none;
  text-indent: .01px;
  text-overflow: "";
}
.poa-select::-ms-expand {
  display: none;
}

来自here和here的想法。

Answer 2

不幸的是，还没有一种跨浏览器兼容的样式表单元素与CSS的路径：通常不会让设计师控制它们的外观/行为，因此表单元素非常难以设计。许多浏览器根本不允许你设置它们的样式！

如果您需要在所有浏览器中获得一致的外观，唯一的途径是使用JavaScript将样式化的HTML元素替换为视图中的表单元素。

这篇文章列出了一些可供选择的选项：http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/

Answer 3

对我有用的技巧是使选择宽度超过100％并应用overflow：hidden

select {
    overflow:hidden;
    width: 120%;
}

The answer from here : How to remove the arrow from a tag in Firefox

Answer 4

使用pointer-events属性。

这里的想法是在原生下拉箭头上覆盖一个元素（以创建我们的自定义箭头），然后禁止在其上的指针事件。 [见this post]

以下是使用此方法的 FIDDLE 。

此外，在this SO answer中，我更详细地讨论了这个和另一种方法。

如何删除选择框上的箭头（Firefox）

4 个答案: