代码描述:<input type="file">实现 浏览器样式统一。<input type="file">实现浏览器样式统一简单介绍
很多朋友可能遇到过这样的问题,那就是文件在各个浏览器中的外观差距会很大,就算是没有差距的话,外观也实在丑的无法想象,下面就通过代码实例详细介绍一下如何实现此控件的表现能够在各个浏览器都统一,并且进行简单的美化。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> body{ font-size:14px; } input{ vertical-align:middle; margin:0; padding:0 } .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; filter:alpha(opacity:0); opacity: 0; width:260px } </style> <script type="text/javascript"> window.onload=function(){ var otextfield=document.getElementById("textfield"); var ofileField=document.getElementById("fileField"); ofileField.onchange=function(){ otextfield.value=this.value; } } </script> </head> <body> <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"/> <input type="submit" name="submit" class="btn" value="上传" /> </form> </div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能