css如何修改上传文件按钮样式

css如何修改上传文件按钮样式

不同浏览器对type=file的样式显示不一样，而设计师给我们前端的只有一个上传按钮的效果图，怎么办呢。浏览默认的样式我们无法修改，怎么办呢？？
思路：
1.在type=file标签外面添加一个标签，让这个标签显示我们想要给用户看到的上传按钮效果；
2.把type=file设置为透明的，用户点击的是type=file,实际看到的效果时我们外部的div。

打开html软件开发工具，新建一个html代码页面。如图：

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

设置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

使用不同浏览器打开查看效果。保存html页面后使用浏览器打开即可看到效果，案例中使用常用的4个浏览器。如图：

所有代码。可以直接复制所有代码，粘贴到新建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 /html2023-09-18