美化input文件上传按钮

前言：用过文件上传的同学都知道，html自带的上传按钮样子很丑，如果我们写的界面比较炫的话，在加上个原始的按钮，界面就会大打折扣，所以美化上传按钮是很有必要的。

---

一。实现方法
在按钮的外围包裹一个div，将上传按钮的透明度设为0，将上传按钮的大小和外围div的大小设为相同，再对外围div进行美化即可。
二。代码和样式
1.样式一
html代码：

<div class="file-style">
    <input type="file" onChange="add_files(this.files)" id="file" name="file">选择文件
</div>

css样式：

.file-style
{
    width:100px;
    height:50px;
    background:#0000ff;
    border-radius: 5px;
    text-align: center;
    position:relative; 
}

#file
{
    width:100%
    height:50px;
    opacity:0;
    cursor:pointer
    position:absolute;
}

效果如图：

2.样式二
给div加了个图片，模仿点击加号添加图片
css代码：

.file-style
        {
            width:200px;
            height:250px;
            text-align:center;
            background:url(images/insert.png);
        }

效果如图：

---

以上是美化过程的所有步骤，不好欢迎指正！