您的位置首页百科知识

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

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

的有关信息介绍如下:

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

不同浏览器对type=file的样式显示不一样,而设计师给我们前端的只有一个上传按钮的效果图,怎么办呢。浏览默认的样式我们无法修改,怎么办呢??

思路:

1.在type=file标签外面添加一个标签,让这个标签显示我们想要给用户看到的上传按钮效果;

2.把type=file设置为透明的,用户点击的是type=file,实际看到的效果时我们外部的

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

1.在html代码页面中创建一个

标签,设置class类为file-box;

2.然后在

标签中创建一个 上传文件按钮,设置class类为:file-btn;

3.在

标签中输入上传文件文字。如图:

代码:

上传文件

设置file-btn、file-box这两个类的样式。

file-box用于显示给用户看到的页面效果,file-btn用于点击效果,file-btn需要与file-box完全重合,需要使用positon进行定位。

样式代码:

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

所有代码。可以直接复制所有代码,粘贴到新建html页面,保存后即可看到效果。

所有代码:

文件上传按钮修改样式

上传文件