如何从 Firefox 中的选择元素中删除箭头

小编典典

如何从 Firefox 中的选择元素中删除箭头

all

我正在尝试select使用 CSS3 设置元素的样式。我在 WebKit (Chrome / Safari) 中得到了我想要的结果，但 Firefox
的表现并不好（我什至不关心 IE）。我正在使用 CSS3appearance属性，但由于某种原因，我无法将下拉图标从 Firefox 中移出。

这是我正在做的一个例子：http: //jsbin.com/aniyu4/2/edit

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

正如你所看到的，我并没有尝试任何花哨的东西。我只想删除默认样式并添加我自己的下拉箭头。就像我说的，在 WebKit 中很棒，在 Firefox
中不是很好。显然，-moz-appearance: none并没有摆脱下拉项目。

有任何想法吗？不，JavaScript 不是一个选项

阅读 241

2022-08-24

共1个答案

小编典典

好的，我知道这个问题已经过时了，但是 2 年过去了，Mozilla 什么也没做。

我想出了一个简单的解决方法。

这实质上剥离了 Firefox 中选择框的所有格式，并使用您的自定义样式在选择框周围包裹了一个 span 元素，但应该只适用于 Firefox。

假设这是您的选择菜单：

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

让我们假设 css 类“css-select”是：

.css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

在 Firefox 中，这将与选择菜单一起显示，然后是丑陋的 firefox 选择箭头，然后是您漂亮的自定义箭头。不理想。

现在要在 Firefox 中进行此操作，请在类 ‘css-select-moz’ 周围添加一个 span 元素：

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

然后使用 -moz-appearance:window 修复 CSS 以隐藏 mozilla 的脏箭头，并将自定义箭头扔到 span 的类 ‘css-
select-moz’ 中，但只让它在 mozilla 上显示，如下所示：

.css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
}

3 小时前才偶然发现这个错误非常酷（我是网页设计新手，完全是自学的）。然而，这个社区间接地为我提供了很多帮助，我认为是时候回馈一些东西了。

我只在 firefox (mac) 18 版和 22 版（更新后）中对其进行了测试。

欢迎所有反馈。

2022-08-24