php设置上传文件浏览按钮的样式和文字,文件上传按钮的用户自定义样式的实现...
一般在做WEB开发项目的时候碰到文件上传必不可少,但是因为各家浏览器对于
标签支持不同所以在各个浏览器下的显示也是不一样的。可能在用户体验方面会形成困扰,今天就给大家介绍一下文件上传按钮的用户自定义样式的实现。
实现原理:
建立两个层,一个层包装以下简称文件按钮层,一个层包装上传文件按钮的自定义样式,以下渐层样式层。设置两个层的大小一致,将文件按钮层设置相对定位position = relative、z-index = 2,将样式层设置为绝对定位设置position=absolute、z-index = 1并且设置top left属性使之与文件按钮层重叠。这样就使大小的一样的两个层重叠在了一起,并且文件按钮层在上面。接下来设置文件按钮层为完全透明,便实现了用户自定义样式。
下面给出实现代码,以下代码可以直接拖动至浏览器查看效果,建议使用chrome浏览器。IE浏览器对于CSS样式支持不够,不能够显示渐变效果。
代码:
hidetypebutton.html
.user-file-outwrap{width: 100px;height: 30px;overflow: hidden;position: relative;border: 1px solid gainsboro;border: 1px solid rgba(0,0,0,0.1) !important;}
.user-file-wrap{width: 100%;height: 100%;overflow: hidden;position: relative;z-index: 2;overflow: hidden;}
.user-file-wrap input{margin: 0 0 0 -2px;padding: 0;width: 100%;height: 100%;opacity: 0;filter: alpha(opacity=0);cursor: pointer;}
.user-file-bg{
width: 100%;height: 100%;position: absolute;top: -1px;left: -1px;z-index: 1;text-align: center;font-size: 12px;line-height: 30px;
background-color: transparent;
background-image: -moz-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
background-image: -o-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .85)),to(rgba(247, 247, 247, .85)));
background-image: -webkit-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
background-image: linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
border: 1px solid gainsboro;border: 1px solid rgba(0,0,0,0.1) !important;
color: #444;
}
php设置上传文件浏览按钮的样式和文字,文件上传按钮的用户自定义样式的实现...相关推荐
- win7计算机文件浏览不了,win7系统计算机文件打不开的解决方法
很多小伙伴都遇到过win7系统计算机文件打不开的困惑吧,一些朋友看过网上零散的win7系统计算机文件打不开的处理方法,并没有完完全全明白win7系统计算机文件打不开是如何解决的,今天小编准备了简单的解 ...
- 给文字上加中划线_小小招式让你给文字添加上划线
在Word中为字符添加下划线是一件很容易的事情,但是要添加上划线就是不那么方便了.偏偏在某些时候我们还真就需要为指定的字符添加上划线,比如在数学文档中要输入平均数的数学符号,就是在指定变量上加一个短线 ...
- JSP中的文件操作:数据流、File类、文件浏览、目录操作、上传下载
文件可以永久地存储信息,从本质上讲文件就是存放在盘上的一系列数据的集合.应用程序如果想长期保存数据,就必须将数据存储到文件中,这就涉及到文件的操作.而在编写网站应用程序的过程中,有许多地方要对文件 ...
- python上传文件到onedrive_基于Python的onedrive文件本地化浏览系统–PyOne
基于Python的onedrive文件本地化浏览系统–PyOne PyOne是一款基于Python-Flask的onedrive文件本地化浏览系统,使用MongoDB储存文件列表,使用redis缓存数 ...
- jquery 文件上传 触发两次_点击三次input按钮,前两次不选择任何文件,第三次选择一个文件,结果上传了3个文件,即发生了三次请求...
点击三次input按钮,前两次不选择任何文件,第三次选择一个文件,结果页面上出现了3个文件,也就是上传了3个文件 我点击input,不选择任何文件,然后取消文件选择器的窗口,然后第二次次点击input ...
- android使用webview上传文件,Android项目中如何在webview页面中上传文件
Android项目中如何在webview页面中上传文件 发布时间:2020-11-26 15:56:27 来源:亿速云 阅读:68 作者:Leah 本篇文章为大家展示了Android项目中如何在web ...
- django上传文件到服务器,如何用django将文件上传到服务器?
我已经为我的问题找到了this very simple code,但我试图在我的项目中重复它,但没有结果. 我认为我做的每件事都是正确的,但结果很糟糕.在 我这样做: 在表单.py在class Upl ...
- vue上传文件到php,vue+axios+php如何实现上传文件功能?,formdata上传文件附加参数...
vue+axios+php如何实现上传文件功能?Vue Axios PHP如何实现上传文件的功能?, 推荐:<PHP视频教程> 当我们提交表单时,我们经常会遇到一些表单提交要求.vue的a ...
- .net fileupload批量上传可删除_【JavaWeb基础】文件上传和下载(修订版)
前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 什么是文件上传? 文件上传就是把用户的信息保存起来. ...
- springboot上传文件同时传参数_Spring Boot 系列:使用 Spring Boot 上传文件
上传文件是互联网中常常应用的场景之一,最典型的情况就是上传头像等,今天就带着带着大家做一个 Spring Boot 上传文件的小案例. 1.pom 包配置 我们使用 Spring Boot 版本 2. ...
最新文章
- 两个三维图像互信息python_python – 使用numpy计算成对互信息的最佳方式
- 更极速:EdgeRoutine边缘程序
- 高频面试题3 类初始化过程与实例初始化
- 类型的取值范围_Java基础类型取值范围,从基础的理解加深记忆
- 116 Python GIL全局解释器锁
- 凸优化有关的数值线性代数知识 作业题
- Linux - 在yocto构建中使用i2c-tools
- 微信支付开发java开发_微信公众号支付开发全过程 (java 版)
- 51单片机驱动步进电机——使用ULN2003芯片
- com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Table doesn't exist
- Linux基础指令入门 2
- AndroMDA Getting started(七)
- 每晚泡脚15分钟,5年下来有哪些变化
- [分享]深思--求索人的心智 就是求索长青基业
- 2022-2028全球与中国无线和多室音频市场现状及未来发展趋势
- Python_OpenCV_实现模糊集合用于图像增强(对比度提升,空间滤波)
- 乐观不是没头没脑的嘻嘻呵呵,真正的乐观是看清现实的残酷后,依然斗志昂扬,积极生活
- vue npm run dev 提示To install them, you can run: npm install --save @/url
- 信创操作系统--统信UOS桌面操作系统博文汇总目录
- pandas操作两列日期类型数据相减并要求结果为整数类型
热门文章
- Java8 的一些新特性总结
- MVC3+EF4.1学习系列(八)-----利用Repository and Unit of Wor
- [转载] 七龙珠第一部——第012话 向神龙许愿
- 通过tomcat插件启动Maven工程
- nodejs后台系列--第二篇--使用Navicat来创建数据库
- 网络基础知识(黑马教程笔记)-6-静态资源访问的功能实现
- java实践体会,java实践心得体会范文3篇
- java源码编译_java 源码编译
- vue 多层双层全选_vue多级复杂列表展开/折叠,全选/分组全选实现
- c vb语言代码大全下载,VB编程常用代码大全