这篇文章主要为大家详细介绍了用纯css实现input[type=file]的样式控制,文中示例代码介绍的非常详细,零基础也能参考此文章,感兴趣的小伙伴们可以参考一下。
代码如下:
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .fileContainer { overflow: hidden; position: relative; } .fileContainer [type=file] { cursor: inherit; display: block; font-size: 999px; filter: alpha(opacity=0); min-height: 100%; min-width: 100%; opacity: 0; position: absolute; right: 0; text-align: right; top: 0; } /* Example stylistic flourishes */ .fileContainer { background: red; border-radius: .5em; float: left; padding: .5em; } .fileContainer [type=file] { cursor: pointer; } } </style> </head> <body> <label class="fileContainer"> 点击这里实现文件上传! <input type="file"/> </label> </body> </html>
看完上述内容,你们掌握用纯css实现input[type=file]的样式控制的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。