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~

XML/HTML CodeCopy content to clipboard

<!doctype html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< style > </ style >
</ head >
< body >
　　< input type = "file" value = "Select file" />
</ body >
</ html >

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)

XML/HTML CodeCopy content to clipboard

<!doctype html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< style >
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD; height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; opacity:0;width:260px; }
</ style >
</ head >
< body >
< br > < br >
< div class = "file-box" >
< form action = "" method = "post" enctype = "multipart/form-data" >
< input type = 'text' name = 'textfield' id = 'textfield' class = 'txt' />
< input type = 'button' class = 'btn' value = 'browse' />
< input type = "file" name = "fileField" class = "file" id = "fileField" size = "28" />
</ form >
</ div >
</ body >
</ html >

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.

<<: JavaScript data transmission between different pages (URL parameter acquisition)

>>: Example of implementing QR code scanning effects with CSS3