1、打开html软件开发工具，新建一个html代码页面。如图：
2、1.在html代码页面中创建一个<div>标签，设置class类为file-box；
2.然后在<div>标签中创建一个 <input type="file">上传文件按钮，设置class类为：file-btn；
3.在<div>标签中输入上传文件文字。如图：
代码：
<div class="file-box">
<input type="file" class="file-btn"/>
上传文件
</div>
3、设置file-btn、file-box这两个类的样式。
file-box用于显示给用户看到的页面效果，file-btn用于点击效果，file-btn需要与file-box完全重合，需要使用positon进行定位。
样式代码：
<style>
.file-box{
display: inline-block;
position: relative;
padding: 3px 5px;
overflow: hidden;
color:#fff;
background-color: #ccc;
}
.file-btn{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
outline: none;
background-color: transparent;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
</style>
4、使用不同浏览器打开查看效果。保存html页面后使用浏览器打开即可看到效果，案例中使用常用的4个浏览器。如图：
5、所有代码。可以直接复制所有代码，粘贴到新建html页面，保存后即可看到效果。
所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传按钮修改样式</title>
<style>
.file-box{
display: inline-block;
position: relative;
padding: 3px 5px;
overflow: hidden;
color:#fff;
background-color: #ccc;
}
.file-btn{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
outline: none;
background-color: transparent;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
</style>
</head>
<body>
<div class="file-box">
<input type="file" class="file-btn"/>
上传文件
</div>
</body>
</html>
