search

Home  >  Article  >  Web Front-end  >  About input file control and beautification

About input file control and beautification

高洛峰
高洛峰Original
2017-02-17 16:15:141762browse

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.

关于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>

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Basic learning tutorial on table tag in HTMLNext article：Basic learning tutorial on table tag in HTML

Related articles

See more