How to operate the input box style of type='file'

This time I will show you how to operate the input box style of type="file". What are the precautions for operating the input box style of type="file"? The following is a practical case. Get up and take a look.

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.

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. Without further ado, please see

# for details. ## 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, , can only be implemented by simulation, 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, okay, For a page-cutting and picture-cutting guy like me, I don’t understand this, and even if I understand, 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 scheme

Before, the method I knew, and in fact everyone knows, is to make the upload button of type="file" transparent and then overlay it. On a picture, this can make people 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://sfault-image.b0.upaiyun.com/346/967/3469672357-54250d7235406_articlex) no-repeat 0 0;z-index: 1;}

It should be very clear in this code that you can see the implementation method. The upload button is positioned on top of the image through positioning. The image can be used as the background image of an empty label, and then the opacity of the upload button is changed. After setting it to 0, you will not be able to see this button, but it actually exists, and then...then...there will be no more, and the effect will be there...

Solution 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 -webkit- prefix, it will have no effect, so you can just take it for fun. Bar.

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

The HTML structure in this code is very simple, just one [

input tag

is enough. It is much simpler than the method seen before, but it is definitely good for compatibility. It's much worse. I don't know how it is on the mobile phone. Nowadays, most mobile phone browsers are webkit-based browsers. Forget it, let's just treat it as entertainment and have fun watching it~Simple HTML structure modification The 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. 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 will not be able to see that an input of type="file" contains so much content. . The way to turn it on is very simple, just 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 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, I know how to modify the style Just these two, and the solution for webkit is also very limited, but it should be no problem for the mobile phone. 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"] in forms.css, but I don’t know why, I am in my own style After adding this selector, 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.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to solve the problem of incomplete display of vertical columns of text in html

How to use html Hyperlink opens a new window and controls the properties of the window

htmlHow to use style to add attributes

The above is the detailed content of How to operate the input box style of type='file'. For more information, please follow other related articles on the PHP Chinese website!