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

问题描述

我试图使用CSS3风格的选择元素。我得到的结果我想在WebKit（Chrome / Safari），但Firefox不是很好玩（我甚至不打扰IE）。我使用CSS3 外观属性，但由于某种原因，我不能摇动下拉图标从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/edit

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;
  }
} 

很酷的只有绊到这个bug 3小时前（我是新的webdesign和完全自学）。然而，这个社区间接地为我提供了这么多的帮助，我认为这是关于时间我给予的东西。

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中的select元素中删除箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！