关于input的file 控件及美化

三叶草

在一些网站进行上传时，当单击了“浏览”按钮之后会弹出【选择文件】的对话框。想要实现这一功能，用input的file控件来实现就好啦~

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

效果图是酱婶的：
注意！别以为这个是由一个text和一个button组合成的，其实它就是一个file控件哦

今天工作中遇到要求：不显示“未选择任何文件”，捣鼓够一个小时，发现设置它的width值就搞定了：
代码： <input type="file" value="选择文件" />
width值设置为70px刚刚好，如下图：

【美化】
思路：
外面的一层div是为了给里面的input提供位置参考，因为写样式的时候需要相对定位，使真正的file控件覆盖在模拟的上面，然后隐藏掉file控件（即使file控件不可见）

<!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='浏览' />  
      <input type="file" name="fileField" class="file" id="fileField" size="28"/>  
    </form>  
    </div>  
  </body>  
  </html>

效果：

以上这篇关于input的file 控件及美化就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持CodeAE代码之家。

[Html/CSS] 关于input的file 控件及美化

相关帖子

cf file watcher解决方法

电力猫怎么配对 TP-Link电力猫和扩展器配对教程

详解 SSL（三）：SSL 证书该如何选择？

HTML5 placeholder美化input背景提示文字

HTML5 input新增的几种类型（数字、日期、颜色选取、范围）

电力猫配对 TP-Link电力猫和扩展器配对教程

js数组之间如何进行连接

怎么在JavaScript中加注释

Android控件Spinner实现下拉列表及监听功能

如何加强网站安全防范

三叶草 LV3