如何在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和所有其他瀏覽器都使用帶有瀏覽按鈕的熟悉的輸入框 - 這也可以讓用戶複製和粘貼文件鏈接，這是一個很有用的好處。