Simple question: How do you style file input elements in forms with anything resembling consistency when display across browsers varies so greatly? I’m particularly thinking of Chrome, which replaces the usual empty-box/browse-button element with a single “choose file” button. Do you simply reconcile yourself to the elements looking totally different in different browsers and work around the spatial disparities in the layout?
Form controls do tend to vary quite a lot between the browsers and aren’t the easiest thing to style so I wouldn’t worry too much about the ‘file select’ control differences.
Remember that very few people apart from you will ever look at your site in multiple browsers (unless it doesn’t work in the first one they try), so getting the site to look exactly the same in all of them is not necessary - what matters is that it looks right, particularly given the base browser interface, and that can accommodate differently styled form controls.
As Robert said, it’s very difficult to get all form controls to look the same across all browsers – you’re better off not trying, because all that’s likely to happen is that you’ll mess some of them up!
Well, you might be in luck because Webkit is pretty good at adding pseudo elements for replaced content. I know for sure there is ::-webkit-file-upload-button. Webkit is also the only layout engine (?) to support the appearance property (-webkit-appearance). However, the values they use seem to be non-standard, so you might have to mess around with it a bit. The appearance property was created in part for the purpose of reducing the dissonance between browsers’ (and OS) form widgets.
I don’t know for sure, but maybe you would be able to do something like:
::-webkit-file-upload-button { content: "Browse"; float: right; }
::-webkit-file-upload-text { -webkit-appearance: textfield; }
Don’t quote me on this. I’m not sure if this will work. It’s just an idea.
In the end, I agree with the previous posters above. It’s okay for your site to look slightly different in different browsers.
One issue with the content: “Browse” thing… that breaks the user’s language settings.
As the browser has control over the form, the user’s browser language sets that text (of course, it’s very likely your users will all be using the same language as your site, but…).
So my K-Meleon, which is in Spanish, says “Examinar”, and my Dutch browsers say “Bladeren” and my Engrish browsers seem to change depending on browser. Safari says “choose file” while FF says “Browse”". So, I assume users are used to their browsers and expect their language.
Prolly not a huge deal, just a thought.
All very interesting thoughts, thanks everyone 