大家用到input:file标签时,对于input:file的样式难看的处理方法一般有2种:
- 采用透明化input:file标签的方法,上面放的input:file标签,下面放的是其他标签,实际点击的还是上面的input:file标签,这种方法考验开发的样式水平了,不在细说
- 采用js去控制,触发input:file标签的click事件。这样就可以使用漂亮的图案来替换input:file的位置,代码如下:
1 <html> 2 <head> 3 </head> 4 <body> 5 <input type="file" id="fileElem" style="display:none" > 6 <button href="#" id="fileSelect" onclick="openBrowse()">Select some files</button> 7 </body> 8 <script> 9 10 11 12 function openBrowse(){ 13 var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false; 14 if(ie){ 15 16 document.getElementById("fileElem").click(); 17 18 }else{ 19 20 var a=document.createEvent("MouseEvents"); 21 a.initEvent("click", true, true); 22 document.getElementById("fileElem").dispatchEvent(a); 23 24 } 25 } 26 </script> 27 28 </html>