Summary of the input box style modification of type="file"

The input type=file in the form is often used in front-end development, but the tragic thing is that the input type=file does not perform uniformly in each browser, and the style is difficult to work; so how do we deal with this problem? This is the main content we discussed today . What is the input of type=file?

I don’t think it’s necessary to say anything about this. Anyway, everyone knows it. In the era of various mobile phones, you can upload it by taking photos directly. Anyway, it’s much more fun than before.

In the past, I could only upload one file. Now, as long as the multiple attribute is added, multiple files can be uploaded, and there are many file formats supported. I won’t say much. For details, please see http://www.w3.org/html/ig/zh/wiki/HTML5/number-state#.E6.96.87.E4.BB.B6.E4.B8.8A.E4.BC.A0.E7.8A.B6.E6.80.81

Anyone who has played CSS knows that among HTML elements, the style modification of form control elements is the most painful. The styles of many controls are changed according to the system theme. If you want to modify them, you can only implement them by simulation, especially in IE browser.

For the upload button type=file, we have modified its style. Some people have used simulation methods, but it is said that there may be some so-called security problems when using simulation methods. Well, for a page like me, Chetuzi, I don’t understand it, and even if I understand it, I don’t know how to deal with it. Then don't simulate it...

But if you don’t simulate, how do you modify the style?

The method I knew before, and the method that everyone knows is to transparently place the type=file upload button and then superimpose it on a picture, so that people can feel that it is achieved by clicking on uploading the picture, and there is no need to look at the native upload button.

Copy the code