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

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

操作方法

  • 01

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

  • 02

    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>

  • 03

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

  • 04

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

  • 05

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

(0)

相关推荐

  • PHPstudy修改上传文件限制大小限制的方法

    越来越多的童鞋在使用PHPstudy来搭建网站, ,PHPstudy搭建php+mysql的网站还是非常不错的,主要就是可以随意切换php版本,但是不少童鞋在用php程序上传文件时候,默认限制的只能上 ...

  • 百度云网盘可以上传文件夹吗?百度云网盘上传文件夹教程

    大家都知道百度云网盘是百度公司推出的一个免费给用户存储文件的服务,那么百度云网盘是怎么进行上传文件的呢?下面小编同学来给大家演示一下: 步骤一:登录到百度网盘以后,然后再全部文件窗口里面点击选择要上传 ...

  • win7系统下百度网盘怎么上传文件?

    win7系统下百度网盘怎么上传文件? 1.首先要打开百度网盘的登录窗口,然后输入百度账号及密码登录到百度网盘,如果没有百度账号也可以通过新浪,qq,人人账号登录,如图: 2.登录到百度网盘以后,然后再 ...

  • js如何上传文件

    在软件开发或网站建站过程中,文件上传是必不可少的一项,不管是上传到服务器还是上传到本地,上传控件的包装如何,上传验证用js或jquery都是最简便实用的技术. 一起来学习,js上传文件以及验证文件格式 ...

  • flashfxp怎么上传文件

    flashfxp是很多网站编辑都在使用的FTP管理工具,主要用于文件.网站电脑软件与手机软件的上传.不过,刚刚下载FTP管理工具的网友,可能还不是很清楚flashfxp上传文件该怎么设置,下面就一起来 ...

  • 图解使用FTP工具上传文件以FlashFXP为例

    现以FlashFXP为例,图解使用FTP工具上传文件。 1: 运行 LeapFTP,点击1处(站点->站点管理器),弹出“站点管理器”窗口;在2处选择“My Servers”项,然后在3处点击“ ...

  • 千牛云盘怎么上传文件夹?淘盘上传和下载文件夹方法介绍

    千牛云盘现在已经正式更名为淘盘,是一款非常好用的网络硬盘,这个千牛云盘怎么上传文件夹呢?小编跟大家分享淘盘怎么上传文件夹,以及怎么从淘盘上下载文件,希望能帮到刚刚开始用淘盘还不太会用的伙伴们哦! 方法 ...

  • ftp二进制上传 FTP设置二进制(binary)模式上传文件图文教程

    FTP怎么使用二进制上传文件?在linux中时我们需要设置ftp上伟为二进制,在 windows时好像没这个区别哦,下面我们来1.FlashFXP。2.LeapFTP。 3.CuteFTP。常用的ft ...

  • 酷盘PC版如何上传文件具体上传步骤图解

    酷盘PC版上传文件的方法如下: 1.首先,安装酷盘PC客户端,注册并登录酷盘。 2.双击桌面的酷盘图标或双击任务栏上的酷盘图标打开酷盘界面。 3.在酷盘界面上点击“上传”按钮选择文件或文件夹上传至酷盘 ...