Home > Article > Web Front-end > About input file control and beautification
About input file control and beautification
- 高洛峰Original
- 2017-02-17 16:15:141760browse
When uploading to some websites, the [Select File] dialog box will pop up after clicking the "Browse" button. If you want to realize this function, just use the input file control to achieve it~
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style></style> </head> <body> <input type="file" value="选择文件" /> </body> </html>
The rendering is from Aunt Jiang:
Attention! Don’t think that this is composed of a text and a button. In fact, it is a file control.
I encountered a requirement at work today: do not display "No file selected" ”, after tinkering for an hour, I found that setting its width value can be done:
Code:
width value Set it to 70px just right, as shown below:
[Beautification]
Idea:
The outer layer of p is to give the inside The input provides a position reference, 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 invisible)
<!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>
<p 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='浏览' />
<input type="file" name="fileField" class="file" id="fileField" size="28"/>
</form>
</p>
</body>
</html>
Effect:
The above article about input file control and beautification is all the content shared by the editor. I hope it can give you a reference, and I hope you will learn more. Support PHP Chinese website.
For more articles about input file controls and beautification, please pay attention to the PHP Chinese website!