怎样用纯HTML和CSS更改默认的上传文件按钮样式
如果你曾经试过,你就会知道,用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦。看看下面的不同浏览器的截图。很明显的,他们长得很不一样。
我们的目标是创造一个简洁,用纯CSS实现的,在所有浏览器里的样子和布局是一样的上传文件按钮。我们可以这样:
步骤1.创建一个简单的HTML标记
1
2
3
4
|
< div class = "fileUpload btn btn-primary" > < span >Upload</ span > < input type = "file" class = "upload" /> </ div > |
第2步:CSS: 有点棘手了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.fileUpload { position : relative ; overflow : hidden ; margin : 10px ; } .fileUpload input.upload { position : absolute ; top : 0 ; right : 0 ; margin : 0 ; padding : 0 ; font-size : 20px ; cursor : pointer ; opacity: 0 ; filter: alpha(opacity= 0 ); } |
为简单起见,我使用应用了BootstrapCSS样式的按钮 (div.file-upload)。
演示:
上传按钮,显示选中的文件
不幸的是纯CSS的做不到这一点。但是,如果你真的想显示所选文件,下面的JavaScript代码片段可以帮助你。
JavaScript:
1
2
3
|
document.getElementById( "uploadBtn" ).onchange = function () { document.getElementById( "uploadFile" ).value = this .value; }; |
DOM:
1
2
3
4
5
|
< input id = "uploadFile" placeholder = "Choose File" disabled = "disabled" /> < div class = "fileUpload btn btn-primary" > < span >Upload</ span > < input id = "uploadBtn" type = "file" class = "upload" /> </ div > |
演示:
原文地址: geniuscarrier.com
怎样用纯HTML和CSS更改默认的上传文件按钮样式的更多相关文章
- 解决OpenFeign默认无法上传文件的问题
前言 最近在项目中使用OpenFeign时,发现其不支持文件上传功能.网上找了很多资料,最后找到feign-form和feign-form-spring的解决方案.但其默认只支持单文件上传,不支持多文 ...
- 用纯css改变默认的radio和checkbox的样式
利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...
- input[type=file]样式更改以及图片上传预览
以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如 ...
- html+css上传文件控件美化
html上传美化: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- python+selenium:解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题
要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...
- 纯js上传文件 很好用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- 只用css来美化的上传表单按钮(抄的迅雷的)
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>文件 ...
- input file上传文件弹出框的默认格式设置
我们使用html的input 标签type="flie"时,如何设置默认可选的文件格式 <input id="doc_file" type="f ...
随机推荐
- JAVA JMX协议监控
JMX协议监控,可通过JMX协议远程监控,实时监控线上jvm情况,并通过平台管理界面进行 展示,可以通过监控实时获得线上服务器运行情况. 可以监控内存.实时线程.共享内存等各种信息. 获取实时线程信息 ...
- Java 操纵XML之创建XML文件
Java 操纵XML之创建XML文件 一.JAVA DOM PARSER DOM interfaces The DOM defines several Java interfaces. Here ar ...
- Cmd2001的毒瘤水题题解
怕不是我再不写题解这题就该成没人做也没人会的千古谜题了...... T1: 仔细分析题面,发现相同就是广义SAM上节点相同,相似就是广义SAM上为从根到某个点路径的前缀..直接SAM上跑从根开始,每个 ...
- BZOJ.3673/3674.可持久化并查集(可持久化线段树 按秩合并/启发式合并)
BZOJ 3673 BZOJ 3674(加强版) 如果每次操作最多只修改一个点的fa[],那么我们可以借助可持久化线段树来O(logn)做到.如果不考虑找fa[]的过程,时空复杂度都是O(logn). ...
- Redis 复制原理及分析
1.测试 见master-slave测试帖 2 原理 第一次.Slave向Master同步的实现是: Slave向Master发出同步请求(发送sync命令),Master先dump出rdb文件,然后 ...
- IAR EWARM __iar_program_start, __iar_data_init3, __iar_copy_init3, __iar_zero_init3
#include <stdint.h> // The type of a pointer into the init table. typedef void const * table_p ...
- eclipse使用内置tomcat和使用外部tomcat的设置
近期由于项目中jsp发请求要訪问项目以外的文件.直接訪问写成"c:\xxx\xxx.mp4"来訪问是没有权限的.不能完毕现有要求.经查询后发现能够在tomcat中配置虚拟文件夹将本 ...
- delphi ribbon使用
http://blog.csdn.net/davinciyxw/article/details/5604209 1.TextEditor(barEditItem)取文本 string editValu ...
- Visual Studio断点调试, 无法监视变量, 提示无法计算表达式
在使用Visual Studio 2012进行断点调试时,对某个变量添加监视,出现"无法计算表达式"的提示. 解决办法:依次点击菜单栏中的"调试"→" ...
- ASP.NET MVC中MaxLength特性设置无效
在ASP.NET MVC项目中,给某个Model打上了MaxLength特性如下: public class SomeClass { [MaxLength(16, ErrorMessage = &qu ...