Summary on modifying the input box style of type='file'_HTML/Xhtml_Web page production

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, please see for detailshttp://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 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 it, you can only simulate it. Implementation, especially in IE browser.

For the type="file" upload button, 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. Well, for a page-cutting guy like me, I don’t understand this, 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?

Image positioning overlay solution

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

Copy code

The code is as follows:

.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/

In this demo, you should be able to clearly see the implementation method. Position the upload button on top of the image through positioning. The image can be used as the background image of an empty label, and then change the opacityAfter setting the transparency to 0, the button will no longer be visible, but it actually exists, and then...then...there will be no more, and the effect will be there... Solutions for webkit

This solution for the webkit kernel is actually a bit ridiculous and has little practical use, because it is only effective for the webkit kernel. If it does not support the writing method with the prefix

-webkit-, it will have no effect, so everyone Just treat it as entertainment.

Copy codeThe code is as follows:

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;}

Watch the demo first: http://jsbin.com/wicihihabifi/1/

The HTML structure in this demo is very simple, just one [input tag is enough. It is much simpler than the method seen before, but it is definitely much worse in terms of compatibility. I don’t know what it’s like on mobile phones. Nowadays, most mobile phones use webkit-based browsers. Forget it, let’s just treat it as entertainment and have fun watching it~

The simple HTML structure modification style completely relies on the ::-webkit-file-upload-button pseudo-element. Just make corresponding modifications to the style of this pseudo-element, because this It's just an ordinary button element. It will be clearer if we view this button element by displaying 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 will not see an input of type="file" So much more included in . The way to turn it on is very simple, click on 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 other input tags by themselves. If there is a shadow DOM, it can definitely be expanded. Then there are some new tags in HTML5...

at last

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 in forms.css, but I don’t know why, but after adding this selector to my style, I still didn’t see any effect, so I stopped playing.

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 is also an Opera browser. When I played it on Mac, the style of the prefix -webkit- was directly inherited...

Attachment: Upload button image: