如何从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屋!