OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

怎样用纯HTML和CSS更改默认的上传文件按钮样式


分享到


分类 大话编程   关键字 分享   发布 ourjs  1414485724768
注意 转载须保留原文链接,译文链接,作者译者等信息。  
如果你曾经试过,你就会知道,用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦。看看下面的不同浏览器的截图。很明显的,他们长得很不一样。



我们的目标是创造一个简洁,用纯CSS实现的,在所有浏览器里的样子和布局是一样的上传文件按钮。我们可以这样: 

步骤1.创建一个简单的HTML标记 

<div class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</div>

第2步:CSS: 有点棘手了

.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: 

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
};

DOM:

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


演示:



原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 我们不需要JavaScript框架
  2. 将GO编绎成JavaScript,用GO语言来写前端代码
  3. Nginx的大计划:将原生支持JavaScript
  4. 针对特定浏览器起作用的CSS: IE Chrome Firefox CSS Hack
  5. 不需要密码的登录
  6. 程序员取名:用大数据分析一下宝宝取名时最容易重复的名字
  7. 15个最好的HTML5前端响应式框架(2014)
  8. Google收购Firebase,Fire加入谷歌云平台
  9. Redis集群,不再雾里看花
  10. Angular.JS出了什么问题?
  11. 用 OnceAir 搭建个人Git/Svn/照片备份服务器,每年电费7块钱

 相关阅读 - 大话编程
  1. 今天我去面试, 受打击了:你是学 .net 的吧?
  2. JavaScript中的继承,构造函数以及new关键字的作用
  3. fibjs 比 nodejs 快五倍
  4. 痛苦的Java程序员
  5. OneBody:开源的社交网络,邮件列表,词典和内容管理系统
  6. 我不懂Swift
  7. 2014 Hangjs 见闻流水账第一天
  8. Linux 桌面的发展之路!
  9. 为什么我不建议你将JavaScript作为主力语言
  10. 静态web的回归

 关键字 - 分享
  1. 对于现代开发来说,JavaScript就是一种垃圾语言
  2. 我为什么不再用Compass写CSS(缺点分析)
  3. Redis/Python被要求更改Master/Slave程序接口名称和描述
  4. IE、Chrome、Firefox浏览器默认首页被改成360导航解决办法(删除daohang88.com)跳转
  5. 程序员疑似将MySQL用户名密码上传至Github,导致华柱1.3亿条开房数据泄漏
  6. 从 Node 到 Go:一个粗略的比较—GO平均性能比JavaScript快十几倍
  7. Linux上为git无交互添加最低权限的使用用户
  8. 为jquery的ajax请求添加超时timeout时间
  9. 上海行业工资排名:产品经理一骑绝尘,前端排名第二?
  10. 使用简单的JavaScript,我们为什么应该抵制ES6的一些特性

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号