About input file control and beautification-HTML Tutorial-php.cn

About input file control and beautification

高洛峰

Release： 2017-02-17 16:15:14

Original

1769 people have browsed it

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>

Copy after login

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.

关于input的file 控件及美化

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:

关于input的file 控件及美化

[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=&#39;text&#39; name=&#39;textfield&#39; id=&#39;textfield&#39; class=&#39;txt&#39; />    
        <input type=&#39;button&#39; class=&#39;btn&#39; value=&#39;浏览&#39; />    
        <input type="file" name="fileField" class="file" id="fileField" size="28"/>    
    </form>    
    </p>    
</body>  
</html>

Copy after login

Effect:

关于input的file 控件及美化

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!