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

What is the input type="file"?

I don't think there's any need to explain what this is, everyone knows it anyway. And in this era of various mobile phones, you can also upload photos directly by taking them. It's much more fun than before.

In the past, you could only upload one file. Now, you can upload multiple files by adding the multiple attribute, and there are many file formats supported. 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

Upload button style adjustment

Friends who have played with CSS know that among HTML elements, the style modification of form control elements is the most painful. The styles of many controls change with the system theme. If you want to modify them, you can only simulate them, especially in IE browser.

For the upload button type="file" , we once modified its style. Someone tried using a simulation method, but it is said that there might be some so-called security issues when using a simulation method. Well, for a page maker and image cutter 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...

But if we don’t simulate, how can we modify the style?

Image positioning overlay solution

Before, the method I knew, in fact, everyone knows the method, which is to make the upload button type="file" transparent and then superimpose it on an image, so that people can feel that it is achieved by clicking to upload the image, and there is no need to see the native upload button.

Copy code

The code is as follows:

<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://sfault-image.b0.upaiyun.com/346/967/3469672357-54250d7235406_articlex) 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 how to implement it. The upload button is positioned above the image. The image can be used as a background image for an empty label. Then, the upload button's opacity is set to 0 so that the button cannot be seen. However, it actually exists. Then... Then... Nothing else happens, and the effect is achieved...

Solutions for WebKit

This solution for the webkit kernel is actually a bit far-fetched and not very practical, because it is only valid for the webkit kernel. If the writing with the -webkit- prefix is not supported, it will have no effect, so everyone should just watch it for entertainment.

Copy code

The code is as follows:

<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://sfault-image.b0.upaiyun.com/346/967/3469672357-54250d7235406_articlex) no-repeat 0 0;border: 0 none;z-index: 2;}

First look at the demo: http://jsbin.com/wicihihabifi/1/

The HTML structure in this demo is very simple, with only one [ input tag. It is much simpler than the previous method, but it is definitely less compatible. I don’t know how it works on mobile phones. Most mobile phones now use webkit-based browsers. Forget it, just treat it as entertainment and enjoy it.

The simple HTML structure modification style is completely dependent on the ::-webkit-file-upload-button pseudo-element. Just make corresponding modifications to the style of this pseudo-element, because this is just an ordinary button element. If we view this button element by displaying the shadow DOM, we will have a clearer view.

This is the DOM tree seen in the Chrome developer tools. Generally speaking, if we don’t enable viewing the shadow DOM, we can’t see that an input of type="file" contains so much content. The way to open it is very simple. Click the gear in the upper right corner of the developer tool. , then just check this box in the pop-up layer.

Now you can check other input tags yourself. If there is shadow DOM, it can be expanded. Then in the new HTML5 tags, there are also some...

at last

For the input tag of type="file" , currently, there are only two ways I know of to modify the style, and the solution for webkit is also very limited, but it should be no problem for mobile phones. Maybe someone will ask, what about other browsers? Yes, what about them? I don’t know either.

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

PS: For 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's also an Opera browser. When I was playing on Mac, the style with the prefix -webkit- was directly inherited...

Attachment: Upload button image: