自定义input type=“file”样式

编写基本的HTML代码，例如： <img id="upload_img" src="img/enroll/upload-btn.png" style="width: 254px;height: 246px;" /> <input id="file" type="file" class="mystyle" accept="image/*" />

编写input的CSS代码: .mystyle { width: 250px; height: 250px; position: relative; cursor: pointer; outline: medium none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; top: -80%; left: 10px; }

在浏览器上运行代码，根据实际情况来调整CSS中的长宽和上下左右距离等。实现原理，利用CSS中透明的属性，把input type=“file”隐藏了，然后把它放到您自定义的图片或按钮的位置上。