• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    关于input的file 控件及美化

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

    XML/HTML Code复制内容到剪贴板
    1. <!doctype html>    
    2. <html lang="en">    
    3. <head>    
    4.   <meta charset="UTF-8">    
    5.   <title>Document</title>    
    6.   <style></style>    
    7. </head>    
    8. <body>    
    9.   <input type="file" value="选择文件" />    
    10. </body>    
    11. </html>    

    效果图是酱婶的:

    注意!别以为这个是由一个text和一个button组合成的,其实它就是一个file控件哦

    今天工作中遇到要求:不显示“未选择任何文件”,捣鼓够一个小时,发现设置它的width值就搞定了:

    代码: <input type="file" value="选择文件" />

    width值设置为70px刚刚好,如下图:

    【美化】

    思路:

    外面的一层div是为了给里面的input提供位置参考,因为写样式的时候需要相对定位,使真正的file控件覆盖在模拟的上面,然后隐藏掉file控件(即使file控件不可见)

    XML/HTML Code复制内容到剪贴板
    1. <!doctype html>  
    2. <html lang="en">  
    3. <head>  
    4.   <meta charset="UTF-8">  
    5.   <title>Document</title>  
    6.   <style>  
    7.     .file-box{ position:relative;width:340px}    
    8.     .txt{ height:22px; border:1px solid #cdcdcd; width:180px;}    
    9.     .btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}    
    10.     .file{ position:absolute; top:0; right:80px; height:24px; opacity:0;width:260px; }    
    11.   </style>  
    12. </head>  
    13. <body>  
    14.     <br><br>  
    15.     <div class="file-box">    
    16.         <form action="" method="post" enctype="multipart/form-data">    
    17.         <input type='text' name='textfield' id='textfield' class='txt' />    
    18.         <input type='button' class='btn' value='浏览' />    
    19.         <input type="file" name="fileField" class="file" id="fileField" size="28"/>    
    20.     </form>    
    21.     </div>    
    22. </body>  
    23. </html>  

    效果:

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

    上一篇:HTML中文件上传时使用的&lt;input type="file";元素的样式自定义
    下一篇:Html/Css(新手入门第一篇必看攻略)
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    关于input的file 控件及美化 关于,input,的,file,控件,及,