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:
- * {
-
padding: 0; margin: 0; border: 0;
-
}
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:
- #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!