css3自定义上传图片输入框的方法详解编程语言

css3自定义上传图片输入框的方法

代码如下

 <form class="form1">
 <img src="/kelatoupiao/images/p6/p6_wz1.png" alt="" class="p6_wz1">
 <input type="file" name="file_temporaryImage" onchange="TemporaryMedia();"/>
 </form>
 
.p6_wz1 {
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0px;
 top: 0px;
 
}
 
.form1 {
 width: 2.4rem;
 height: 2.4rem;
 float: left;
 margin-left: 0.43rem;
 margin-top: 0.03rem;
 position: relative;
 
}
 
.form1 input {
 width: 100%;
 height: 100%;
 display: block;
 position: absolute;
 left: 0px;
 top: 0px;
 opacity: 0;
}

ps:原理就是input设置透明度0 然后放最上面 图片放下面