在写项目的时候遇到甲方想要这样的添加图片的样式
但是呢input=“file”的默认样式是酱紫的
所以现在的思路是在html中把两个想要的样式和input都写好，但是让input隐藏，给想要的样式加一个点击函数，点击的时候使input框是选中的，就相当于是就相当于是点击想要的样式，其实点击的是input框
下面是我的html
//这是想要的样式
<div class="square" onclick="show()"> <img id="photo" src="picture/camera.png"/> <p>传图晒单</p> </div> //这是要被隐藏的input框 <input type="file" multiple="multiple" name="file" id="file" accept="images/*" />
css:
.square{width: 66px;margin:0 auto;margin-top:50px;height: 75px;border: 1px solid #eee;text-align: center;} .square img{width: 40px;margin-top: 10px;} input{display: none;}
关键的js出来了（其实就一句话）：
<script type="text/javascript"> function show(){ document.getElementById("file").click();
//获取到input框的id使之成为点击的状态 } </script>
好啦：全部代码放出来了：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/iconfont.css" /> <title>把input="file"中的默认样式换成自己喜欢的样式</title> <script type="text/javascript" src="js/jquery.1.8.2.min.js" ></script> <style type="text/css"> *{margin: 0;padding: 0;} .square{width: 66px;margin:0 auto;margin-top:50px;height: 75px;border: 1px solid #eee;text-align: center;} .square img{width: 40px;margin-top: 10px;} input{display: none;} </style> </head> <body> <div class="choose"> //这是想要的样式 <div class="square" onclick="show()"> <img id="photo" src="picture/camera.png"/> <p>传图晒单</p> </div> //这是要被隐藏的input <input type="file" multiple="multiple" name="file" id="file" accept="images/*" /> </div> <script type="text/javascript"> function show(){ document.getElementById("file").click(); } </script> </body> </html>