Everyone wants (and deserves) to know how to style a file input in an html form (and there are several well known techniques for that). But I'd rather want to know why we have to struggle with a technical limitation that seems so trivial and, more than everything.
I'm not really comfortable with w3c documentation, so maybe I totally missed it during my research, but I can't find any solid documentation about the origin of this problem (references would be sweet).
This control is rendered by the OS, not HTML. It varies from platform to platform. It's "hard" to style because it's not part of the spec.
Essentially, there is no "Browse button" in any standard. That's just how your browser happens to render the control. Different browsers render it differently — different colors, different size, different position, etc. It would be nice if there were a way to style inputs more sensibly, but right now their contents are what's known as a "shadow DOM," which basically means "There's stuff inside here, but you can't touch it because it's not supposed to be there in the standard."
It's hard because having a button that you wouldn't recognize as the standard file browsing button could lead to a security risk. That's just like the dialog on onBeforeUnload and other risky feature : they must be recognizable.
Exposure to the file system is very protected. Sometimes access is not even granted (iPhone).
