About input file control and beautification

When uploading on some websites, after clicking the "Browse" button, the [Select File] dialog box will pop up. To achieve this function, just use the input file control~

The effect picture is like this:

Notice! Don't think this is composed of a text and a button, it is actually a file control.

Today, I encountered a requirement at work: do not display "No file selected". After tinkering with it for an hour, I found that setting its width value solved it:

Code: <input type="file" value="Select file" />

The width value is set to 70px, as shown below:

【beautify】

Ideas:

The outer div is to provide a position reference for the input inside, because relative positioning is required when writing styles, so that the real file control covers the simulated one, and then hides the file control (even if the file control is not visible)

Effect:

The above article about input file controls and beautification is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.