How to style an input[type=file] in css that would render crossbrowser compatible?

Question

I have put an input[type=file] in my page. It has different render in Firefox and Chrome,

In chrome the browse button is inside the field while in Firefox its outside the field
I styled the field with gradient background, with gray border. But it doesn't work in Firefox but looks okay in Chrome.

Is there any way to style them using CSS that render good both in given browsers?

score 2 · Answer 1 · answered Aug 12 '12 at 10:27

2

It's really hard to style native form elements, but this might help you: http://uniformjs.com/

answered Aug 12 '12 at 10:27

Abraham

20,316
7
33
39

is there other way without using js? like css/css3? – Lizza Faith Sep 15 '12 at 10:03
No, unfortunately, you can only do very basic styling with CSS on file upload controls. – Abraham Sep 15 '12 at 12:18

score 0 · Answer 2 · answered Jul 06 '13 at 10:00

I had a real problem getting the FF devs to understand that having to have the same colour of text shown both inside the input boxes and outside of the boxes is a problem. All other text on input boxes is shown against the background of an input box, but the text on a FF22 or 23 file input is - let's hope only temporarily - 'shown' against what is outside. Black text on a black background?

Solution is to put a background-color on all input elements, or just those of type file, even if that's just the default #FFF, in your CSS.

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

Putting it on all inputs for all browsers seems to do no harm as the almost universal default is a white BG for an input. There's no need to target using a class (unless you want to), because older FF and all other browsers use the familiar input box with a browse button - which also lets the user copy and paste file links, a useful benefit.

How to style an input[type=file] in css that would render crossbrowser compatible?

3 Answers3

Linked