本文介绍了为什么在设置自定义边框或背景色时,Firefox在选择箭头按钮上设置背景色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在FF 37中,默认的选择输入如下所示:

A default select input looks like this in FF 37:

当我尝试为其提供不同的边框颜色时:

When I try to give it a different border color like this:

select { border: 1px solid silver; }

结果如下:

由于某些原因,当您给选择输入一个不同的边框,它还会为箭头按钮添加背景和边框。

For some reason when you give a select input a different border it also adds a background and border to the arrow button.

当我执行以下操作时,也会发生类似的事情:

A similar thing happens when I do the following:

select { background: transparent; }

其结果如下:

为什么会这样以及如何更改选择输入的边框或背景而不改变其向下箭头按钮?

Why is this happening and how can I just change the border or background of a select input without it changing the arrow down button?

推荐答案

首先,对表单元素进行样式设置非常复杂和麻烦。最近已经取得了一些进展,但是行为因浏览器而异。问题出在浏览器历史上处理表单元素的方式(由操作系统决定元素的外观)。

To start with, styling form elements is extremely complicated and troublesome. Some progress has been made lately, but behaviour is inconsistent from browser to browser. The problem comes from the way browser have historically handled form elements (letting the OS decide the element appearance).

现在的问题是:由于某些原因,每当修改FF时默认样式表,浏览器对下拉列表应用不同的样式(这可能是错误,错误的实现或计划的行为,但这显然很烦人。)

Now to your question: for some reason, whenever you modify FF default stylesheet, the browser applies a different style to the dropdown (this may be a bug, a bad implementation or planned behaviour, but it's clearly annoying).

一个解决方案可以使用供应商属性 -x-appearance:none 完全消除所有 chrome,例如:

One solution would be to get rid of all the "chrome" altogether, using a vendor property -x-appearance: none, like this:

select {
  border: 1px solid silver;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 25px;
  background: url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIPnI+py+0/hJzz0IruwjsVADs=);
  background-repeat: no-repeat;
  background-position: 95% 42%;
}

请注意,您必须重新应用向下箭头(我通过插入图像作为背景,并以base64编码。)您可以使用自己喜欢的任何图像。

Note that you have to re-apply the down arrow (I did this by inserting an image as a background, encoded in base64.) You can use any image of your liking.

这种方法的问题在于它在IE中不起作用:

The problem with this approach is that it doesn't work in IE: http://caniuse.com/#search=appearance

在这里您可以使用小提琴对其进行测试:

Here you have a Fiddle to test it: https://jsfiddle.net/81L844p4/4/

希望它会有所帮助。

这篇关于为什么在设置自定义边框或背景色时,Firefox在选择箭头按钮上设置背景色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 13:54
查看更多