1、打开html软件开发工具，新建一个html代码页面。如图：
2、在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完全重合，需要使用p泠贾高框ositon进行定位。样式代码：<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>
