Applying styles to a form field of type "file" is one of the biggest headaches for developers working on the implementation of the presentation layer, a simple way to achieve this is to use Jquery and the FileStyle library , this library helps us allows a custom image for the "Browse" button as well as applying styles to the field as if it were text type.
The implementation is very simple.
Step 1: Include the libraries
The Jquery library is available for download from http://jquery.com/ and the FileStyle library from http://www.appelsiini.net/projects/filestyle
Step 2: Have an image for the "Browse" button
Step 3: Implement the feature
$("input[type=file]").filestyle({
image: "choose-file.gif",
imageheight : 22,
imagewidth: 82,
width: 250
});
With this we should apply styles more freely, notice how input[type=file] refers to all "file" type fields, however we could specify it to a particular field that, for example, has the class file-upload in such a way that We would use input.file-upload , the choose-file.gif file should be in the same folder where the page is located or else it should define the full path of the file location.
I hope it is very useful to you.
If you have any concerns or contributions, contact us through this form or our Twitter account @seedcolombia