hi,欢迎访问本站!
当前位置: 首页学习笔记正文

javaScript 美化上传文件框

用户投稿 学习笔记 30阅读
美化上传文件按钮 隐藏原有的按钮 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>上传文件框</title> <style> .file{ display:inline-block; position:relative; overflow:hidden; } .file button{ border-radius:3px; border:1px solid #ccc; display:block; padding:7px 15px; background-color:#fff; cursor:pointer; outline:none; } .file input[type="file"]{ position:absolute; top:-999em; visibility:hidden; } </style></head><body> <input type="file"> <input type="file"> <script> var inps=document.querySelectorAll('input[type="file"]'); inps.forEach(function(inp){ var Div=document.createElement('div'); Div.className='file'; inp.parentNode.insertBefore(Div,inp) var Button=document.createElement('button'); Button.innerHTML="上传"; Div.appendChild(Button); Button.onclick=function(){ inp.click(); } }) </script></body></html>
标签:
声明:无特别说明,转载请标明本文来源!
发布评论
正文 取消