And a little more about input file

The question of styling <input type = "file" /> is so old that probably only the lazy one has not tried his own implementation of this element, which is undoubtedly important in web design.
However, for the most part, solutions are not very straightforward and often offer roughly the following options:

• Place the input file on top of the image and make it transparent.
• Use flash.

At the same time, in the first case, that everything works relatively equally in all browsers, it is suggested that “disputed areas” - those that are active for pressing in one browser, and inactive in another - to close, for example, by putting <div> </ div> above . It should be added that a significant amount of css is immediately used with all kinds of negative indents and floats.
And in the second case, we have a number of uncomfortableness associated with the activation of flash elements (for example, in IE), but I personally (and I think for everyone who uses the Add Block Plus add-on) the block button does not paint the flash input file at all.

Somewhere half a year ago, a regular project milestone and faced with the question of styling the input file I found an excellent article on Habré . However, after some manipulations, I had to abandon this method. And first of all, due to the fact that the hidden elements have not gone away anywhere and have greatly interfered with their invisible body to other elements.
And then a simple thought came to mind - there is no need to block unnecessary parts of the input file, if you can simply limit the space in which this input is located.

Actually, here is a very short example of how to achieve this:
')
CSS

< style type = "text / css" >
#file {
position: relative; top: 0px; left: 0px;
padding: 0px; margin: 0px;
text-align: right;
background: URL (./ file.jpg) no-repeat;
width: 65px; height: 20px; overflow: hidden;
}

#file input {
height: 20px;
position: absolute; right: 0px;
opacity: 0; filter: alpha (opacity = 0);
}
< style >

HTML

< div id = "file" > < input type = "file" name = "myFile" /> </ div >

* Source code was highlighted with Source Code Highlighter .

An example can be found here .

I want to note that the <div> container, absolutely free can be placed where you need it, there are no mandatory float = “left” or position = “absolute”, and there are no extra blocking elements either.
Of the minuses, I note perhaps the fact that it is desirable to limit the width of the button to the width of the Browse button for the input file in IE, that is, 74px.
UPD: Thanks tenshi , everything ingenious is simple. In order for the active area to be of the required size, it is enough to set a larger font size for the input file and increase the width of the container (and, of course, increase your image for styling).