<input type="file">美化效果代码实例
分类:实例代码
html自带的上传控件美观度实在是不行,所以通常会进行一下美化。
下面分享一段能够对上传控件实现简单美化的代码。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .file{ position:relative; display:inline-block; background:#D0EEFF; border:1px solid #99D3F5; border-radius:4px; padding:4px 12px; overflow:hidden; color:#1E88C7; } .file input{ position:absolute; font-size:100px; right:0; top:0; opacity:0; } </style> </head> <body> <a href="javascript::" class="file">选择文件<input type="file"></a> </body> </html>
上面的代码实现了我们的要求,下面简单介绍一下它的实现原理。
将上传控件设置为完全透明,然后用定位的方式将其覆盖在链接之上。
当点击链接的时候,其实就是点击的上传控件,href="javascript::" 目的是为了防止点击的时候出现跳转动作。
<input type="file">美化效果代码实例,这样的场景在实际项目中还是用的比较多的,关于<input type="file">美化效果代码实例就介绍到这了。
<input type="file">美化效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。