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

The input type="file" in the form is often used in front-end development, but unfortunately the performance of input type="file" is not uniform in various browsers, and the style is difficult to work; so how do we Let’s deal with this problem. This is the main content of our discussion today. What is the input of type="file"?

I don’t think there is any need to say what this is. Everyone knows it anyway. And in today’s era of various mobile phones, you can also upload it by taking photos directly. Anyway, it is much more fun than before. .

And in the past, you could only upload one file. Now, you only need to add the multiple attribute to upload multiple files, and there are many file formats supported. Without further ado, the details are 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

Upload button style adjustment

Anyone who has played with CSS knows that in HTML elements, the style of form control elements Modification is the most painful. The styles of many controls change according to the system theme. If you want to modify it, you can only simulate it, especially in IE browser.

For the upload button type="file", we once modified its style. Some people used the simulation method, but it is said that using the simulation method may cause so-called security issues. Sexual issues, well, for a page guy like me, 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 it, how can you modify the style?

Picture positioning overlay scheme

Before, the method I know, in fact, everyone also knows, is to pass type="file "The upload button is made transparent and then superimposed on a picture, so that people can feel that it is achieved by clicking to upload the picture, and there is no need to look at the native upload button.

<input type="file" id="upfile" ><span ></span>.up_icon,.up_input {position: absolute;top: 10px;left: 10px;width: 64px;height: 64px;z-index: 2}.up_icon {overflow: hidden;font-size: 0;line-height: 99em;background: url(http://www.php.cn/) no-repeat 0 0;z-index: 1;}

Take a look at the demo: http://jsbin.com/qacijusihivi/1/

It should be very clear in this demo that you can see the implementation method. The upload button is positioned through positioning. Positioned above the image, the image can be used as the background image of an empty label. Then set the opacity transparency of the upload button to 0 and then you will no longer be able to see the button, but actually It exists, and then...then...there is no more, and the effect is there...

Solution for webkit

This solution for the webkit kernel is actually a bit nonsense and has little practical use. , because it is only valid for the webkit kernel. If the writing method with the -webkit- prefix is ​​not supported, it will have no effect, so you can just take a look at it for fun.

<input type="file" id="upfile">input[type="file"]::-webkit-file-upload-button {position: absolute;top: 10px;left: 10px;width: 64px;height: 64px;overflow: hidden;line-height: 99em;background:url(http://www.php.cn/) no-repeat 0 0;border: 0 none;z-index: 2;}

Look at the demo first: http://jsbin.com/wicihihabifi/1/

The HTML structure in this demo is very simple, just an [input tag That's it. It's much simpler than the method we saw before, but it is definitely much worse in terms of compatibility. I don't know how it is on the mobile phone. Now most mobile phones are webkit-based browsers. Forget it. , just treat it as entertainment and have fun watching it ~

The simple HTML structure modification style is completely dependent on the ::-webkit-file-upload-button pseudo element, for this pseudo element Just modify the element's style accordingly, because this is just an ordinary button element. It will be clearer if we view this button element by displaying the shadow DOM.

This is the DOM tree seen in the chrome developer tools. Generally speaking, if we do not enable viewing of shadow DOM, we cannot see a type There is so much content in the input of ="file". The way to turn it on is very simple. Click the gear in the upper right corner of the developer tools, and then check this box in the pop-up layer.

Now readers can check the other input tags by themselves. If there is a shadow DOM, it can definitely be expanded. Then among the new HTML5 tags, there are some...

Finally

For the input tag of type="file", currently, the only two ways I know to modify the style are these, and then for webkit's solution is also very limited, but it should be no problem for mobile phones. Some people may say, what should I do with other browsers? Yes, I don’t know what to do.

In the Firefox browser, although there is a selector input type="file" > button[type="button"]exists with forms.css , but I don’t know why, after I added this selector to my style, I still didn’t see any effect, so I stopped playing.

PS: Regarding the form.css file, if you are a fan of the Firefox browser, you must know the existence of the path resource://gre-resources/forms.css.

Oh, that’s it. There is also an Opera browser. When I played it on Mac, the style of the prefix -webkit- was directly inherited...

For more articles related to the summary of input box style modification of type="file", please pay attention to the PHP Chinese website!