如何从 Firefox 中的选择元素中删除箭头 [英] How to remove the arrow from a select element in Firefox

问题描述

我正在尝试使用 CSS3 设置 select 元素的样式.我在 WebKit(Chrome/Safari)中得到了我想要的结果，但 Firefox 的运行效果不佳(我什至不介意 IE).我正在使用 CSS3 appearance 属性，但由于某种原因，我无法将下拉图标从 Firefox 中移出.

I'm trying to style a select element using CSS3. I'm getting the results I desire in WebKit (Chrome / Safari), but Firefox isn't playing nicely (I'm not even bothering with IE). I'm using the CSS3 appearance property, but for some reason I can't shake the drop-down icon out of Firefox.

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

Here's an example of what I'm doing: 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 并没有去掉下拉项.

As you can see, I'm not trying for anything fancy. I just want to remove the default styles and add in my own drop-down arrow. Like I said, great in WebKit, not great in Firefox. Apparently, the -moz-appearance: none doesn't get rid of the drop-down item.

有什么想法吗?不，JavaScript 不是一种选择

Any ideas? No, JavaScript is not an option

推荐答案

好吧，我知道这个问题很老了，但是 2 年过去了，mozilla 什么也没做.

Okay, I know this question is old, but 2 years down the track and mozilla have done nothing.

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

I've come up with a simple workaround.

这基本上去除了 firefox 中选择框的所有格式，并用您的自定义样式在选择框周围包裹了一个 span 元素，但应该只适用于 firefox.

This essentially strips all formatting of the select box in firefox and wraps a span element around the select box with your custom style, but should only apply to firefox.

说这是您的选择菜单:

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

让我们假设 css 类 'css-select' 是:

And lets assume the css class 'css-select' is:

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

在 Firefox 中，这将显示选择菜单，然后是丑陋的 Firefox 选择箭头，然后是您漂亮的自定义外观.不理想.

In firefox, this would display with the select menu, followed by the ugly firefox select arrow, followed by your nice custom looking one. Not ideal.

现在要在 Firefox 中执行此操作，请在类css-select-moz"周围添加一个 span 元素:

Now to get this going in firefox, add a span element around with the class 'css-select-moz':

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

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

Then fix the CSS to hide mozilla's dirty arrow with -moz-appearance:window and throw the custom arrow into the span's class 'css-select-moz', but only get it to display on mozilla, like this:

.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 小时前才偶然发现了这个错误(我是网页设计的新手，完全自学).但是，这个社区间接地给了我很多帮助，我想是时候回馈一下了.

Pretty cool for only stumbling across this bug 3 hours ago (I'm new to webdesign and completely self-taught). However, this community has indirectly provided me with so much help, I thought it was about time I give something back.

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

I have only tested it in firefox (mac) version 18, and then 22 (after I updated).

欢迎所有反馈.

这篇关于如何从 Firefox 中的选择元素中删除箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！