首页 > 设计 > WEB开发 > 正文

【CSS】自定义上传文件按钮

2019-11-02 18:21:25
字体:
来源:转载
供稿:网友

这里写图片描述

CSS】自定义上传文件按钮


<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="common.css"/> <style> .sc{ width: 200px; height: 73px; line-height: 73px; text-align: center; /*background: url(img/file_btn_03.png) no-repeat center; background-size: contain;*/ background: deeppink; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; position: relative; } .mystyle{ width: 200px; height: 73px; position:absolute; cursor: pointer; outline: medium none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; top:0px; left: 0; z-index: 9999; } </style> </head> <body> <!--自定义上传图片按钮--> <!--利用CSS中透明的属性,把input type=“file”隐藏了,然后把它放到您自定义的图片或按钮的位置上。--> <div class="sc">上传图片 <input type="file" name="file" id="file" class="mystyle" value="" accept=""/> </div> </body></html><script type="text/javascript"></script>
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表