如何给file类型的input标签，自定义样式

　　自己在编写一个类似于博客园记录生活的网页时，想像QQ空间那样点击一张相机的图像就选择上传的照片，于是就各种百度抄袭，于是，总结到了写过此类博客的前辈们的一些方法。

　　首先，默认的file类型的input标签长这个样子 ：。要想自定义它的样式，我自己思来想去，翻了翻cs3还是没有发现可以直接改变它样式的属性。

　　于是，通过百度学习，我掌握了这类东西的一个美化方法。

　　　　1、设置他的长宽：width和height

　　　　2、设置属性opacity:0（最重要的一步），隐藏它

　　　　3、 自定义一张图片或者文字（同样的长宽）去覆盖input标签，层级一定要低于input标签，不然你点击不了它。

　　最后附上一些代码，仅供大家参考：

　　HTML：

　　　　<div class="camera">
　　　　　　<input type="file" id="camera">
　　　　　　<img src="img/camera.png">
　　　　</div>

　　

　　CSS：　　　

　　　　.camera{
　　　　　　position:relative;
　　　　　　left:10px;
　　　　　　top:-55px;
　　　　　　width:60px;
　　　　　　height:51px;
　　　　}
　　　　.camera input{
　　　　　　position:absolute;
　　　　　　display:inline-block;
　　　　　　width:60px;
　　　　　　height:49px;
　　　　　　opacity:0;
　　　　　　z-index:999;
　　　　　　cursor:pointer;
　　　　}
　　　　.camera img{
　　　　　　position:absolute;
　　　　　　width:60px;
　　　　　　height:50px;
　　　　　　top:0px;
　　　　　　z-index:1;
　　　　}

　　结果图展示：

　　　　

　　　　

 

 

 

 

　　希望对大家所有帮助，同时希望自己记住思考的思路！