我正在尝试select使用 CSS3 设置元素的样式。我在 WebKit (Chrome / Safari) 中得到了我想要的结果,但 Firefox 的表现并不好(我什至不关心 IE)。我正在使用 CSS3appearance属性,但由于某种原因,我无法将下拉图标从 Firefox 中移出。
select
appearance
这是我正在做的一个例子: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并没有摆脱下拉项目。
-moz-appearance: none
有任何想法吗?不,JavaScript 不是一个选项
好的,我知道这个问题已经过时了,但是 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 版(更新后)中对其进行了测试。
欢迎所有反馈。