Demo here.
Unfortunately the browsers do not let you style file inputs. With File Style plugin you can do it!
The plugin allows you to style the filename field and use an image as browse button.
The image button is aligned with
file inputs browse button. In addition to this, the File input is hidden by setting opacity to zero. The example shown in the demo selects for instance the css class file_n and applies to it the main function filestyle (defined in jquery.filestyle.js) with providing the image location, the desired height/width of the image and the width of the textfield:
$("input.file_1").filestyle({A CSS part is provided to customize your input elements.
image: "choose-file.gif",
imageheight : 22,
imagewidth : 99,
width : 100
});
<input type="file" class="file_1" />
How to encourage this blog if you like it:
- Promote our sponsors;
- Add any kind of comment or critic;
- Ask me directly by email if you prefer.
I am 
