Rus*_*sti 172 html css firefox css3
我正在尝试select使用CSS3 设置元素样式.我在WebKit(Chrome/Safari)中获得了我想要的结果,但Firefox并没有很好地发挥(我甚至不打扰IE).我正在使用CSS3 appearance属性,但出于某种原因,我无法摆脱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不是一个选项
Joã*_*nha 165
更新:这是在Firefox v35中修复的.有关详细信息,请参阅完整要点.
刚想出如何从Firefox中删除选择箭头.诀窍是使用的混合-prefix-appearance,text-indent和text-overflow.它是纯CSS,不需要额外的标记.
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
在Windows 8,Ubuntu和Mac上测试,最新版本的Firefox.
实例:http://jsfiddle.net/joaocunha/RUEbp/1/
有关该主题的更多信息:https://gist.github.com/joaocunha/6273016
小智 78
好吧,我知道这个问题已经过时了,但距离赛道还有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>
然后修复CSS以使用-moz-appearance:window隐藏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(在我更新后)测试了它.
欢迎所有反馈.
ope*_*rid 59
对我有用的技巧是使选择宽度超过100%并应用overflow:hidden
select {
overflow:hidden;
width: 120%;
}
这是现在隐藏FF中下拉箭头的唯一方法.
BTW.如果你想要美丽的下拉菜单,请使用http://harvesthq.github.com/chosen/
Dan*_*eld 26
使用组合框上
-moz-appearance的none值现在删除下拉按钮(错误649849).
所以现在为了隐藏默认箭头 - 就像在select元素上添加以下规则一样简单:
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select {
margin: 50px;
border: 1px solid #111;
background: transparent;
width: 150px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>Sha*_*aun 20
我们找到了一种简单而体面的方法.它是跨浏览器,可降级的,并且不会破坏表单帖子.首先将选择框设置opacity为0.
.select {
opacity : 0;
width: 200px;
height: 15px;
}
<select class='select'>
<option value='foo'>bar</option>
</select>
这样你仍然可以点击它
然后使用与选择框相同的尺寸制作div.div应位于选择框下作为背景.使用{ position: absolute }并z-index实现这一目标.
.div {
width: 200px;
height: 15px;
position: absolute;
z-index: 0;
}
<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
<option value='foo'>bar</option>
</select>
用javascript更新div的innerHTML.使用jQuery易于使用:
$('.select').click(function(event)) {
$('.div').html($('.select option:selected').val());
}
而已!只需设置div而不是选择框.我没有测试上面的代码,所以你可能需要调整它.但希望你能得到主旨.
我认为这个解决方案胜出{-webkit-appearance: none;}.浏览器最应该做的是指定与表单元素的交互,但绝对不是它们最初在页面上显示的方式,因为它打破了网站设计.
nin*_*orp 14
试试这种方式:
-webkit-appearance: button;
-moz-appearance: button;
然后,您可以使用不同的图像作为背景并放置它:
background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;
moz浏览器还有另一种方法:
text-indent:10px;
如果您选择了已定义的宽度,则此属性将按下选择区域下的默认保管箱按钮.
这个对我有用!;)
虽然不是一个完整的解决方案,但我发现......
-moz-appearance: window;
......在某种程度上起作用.您无法更改背景(-color或-image),但可以使用color:transparent呈现元素不可见.不完美但它是一个开始,你不需要用js替换系统级元素.