By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,445 Members | 1,160 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,445 IT Pros & Developers. It's quick & easy.

Manipulating file input with CSS

P: 14
Hi, everybody,

Got a question that's completely perplexing me.

I'm developing a site that uses a universal (or "star") selector on a global level, for many different pages. The star selector was not my doing and I have to live with it. It's very simple:

Expand|Select|Wrap|Line Numbers
  1. * {
  2.     padding: 0; margin: 0; border: 0;
  3. }
Now, obviously, because of this, I have to specifically set a border for form elements, or else they appear invisible. I haven't run into too many problems with this -- well, not too many problems I couldn't solve -- until now. I'm trying to insert a file input; you know, the kind that's a text input with a built-in browse button to find a file:

[HTML]<input type="file" id="browse" size="42"/>[/HTML]

I can get a border on this very easily using this code:

Expand|Select|Wrap|Line Numbers
  1. #browse { border: 1px solid #999; font-size: 11px; padding: 2px; margin-bottom: 1px; }
But! While it looks good in IE, in Firefox, unlike every other form element, the border appears with the full HTML shading scheme. In other words, applying any border information with CSS makes a border appear, but I don't get to choose which border. Now, all my research reveals that the file input features some of the fewest CSS styling options of any HTML element. But still, I managed to find some sites where a file input is appearing with just a plain, shading-free 1-pixel border in Firefox. When I noticed that those sites weren't using a universal selector to set a border, I took mine out temporarily, and the problem was fixed. Unfortunately, taking it out is not an option in the long run.

There has to be a solution to this -- right? Anything set globally must somehow be reversible on an individual element.

Any help would be greatly appreciated!
Mar 7 '07 #1
Share this Question
Share on Google+
3 Replies


Expert 100+
P: 1,892
Check out this let me know if it helps.
Mar 8 '07 #2

P: 14
Ah, yes, I came across the link in that thread yesterday. But I was trying to avoid it! Was hoping there was something a little less hacky I could try, but I guess if there's no other option, that's the way to go.
Mar 8 '07 #3

Expert 100+
P: 1,892
Ah, yes, I came across the link in that thread yesterday. But I was trying to avoid it! Was hoping there was something a little less hacky I could try, but I guess if there's no other option, that's the way to go.
I've tried several different things this seems to be the best way I've seen so far.
Mar 9 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.