如何在CSS中输入[type = file]来渲染交叉浏览器兼容？

Question

我在页面中放入了一个input[type=file]。它有不同的呈现在Firefox和Chrome，

• 在Chrome的浏览按钮为场地内，而在Firefox其领域
• 外面我风格与渐变背景的领域，与灰色的边框。但它在Firefox中不起作用，但在Chrome中看起来不错。

是否有任何方式使用CSS在给定的浏览器中呈现良好的样式？

Answer 1

这真的很难风格的天然形态的元素，但是这可能会帮助您：http://uniformjs.com/

Answer 2

• Style input type file?
• Style of input=File as a button
• How can I style a file input field in Firefox?
• Styling an input type="file" button
• Custom text for file input
• How to style "input file" with CSS3/Javascript?
• Styling <input type="file">
• Input TYPE="File" hide the input and leave the button?
• Change cursor type on input type="file"
• https://stackoverflow.com/questions/3984815/jquery-best-way-to-style-a-input-file-tag
• Input File field to Input Text field
• how can i style input file textbox?

Answer 3

我得到FF开发者一个真正的问题要明白，必须有相同的颜色文本显示在输入框内部和外部盒子是个问题。输入框中的所有其他文本都以输入框的背景显示，但FF22或23文件输入中的文本是 - 我们只希望暂时 - 对外显示。在黑色背景上的黑色文本？

解决方法是在CSS中为所有输入元素或只是文件类型设置背景色，即使这只是默认的#FFF。

input[type="file"] {background-color: #FFF;} or 
input {background-color: #FFF;} 

把它在所有浏览器所有的投入似乎没有坏处的几乎是普遍的默认是白色BG为输入。没有必要使用一个类来定位（除非你愿意），因为较老的FF和所有其他浏览器都使用带有浏览按钮的熟悉的输入框 - 这也可以让用户复制和粘贴文件链接，这是一个很有用的好处。