改变 input file 样式（input  文件域）是很多前端朋友经常遇到的头疼问题，今天推荐两种改变 input file 样式的两种常用方法：

  1. 方法一：
  2.  
  3. <input type="text" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">
  4. <input type="button" value="浏览" onclick="path.click()" style="border:1px solid #ccc;background:#fff">
  5. <input type="file" id="path" style="display:none" onchange="upfile.value=this.value">
  1. 也可以写成这样：
  2.  
  3. <style type="text/css">
  4. <!--
  5. #input1{border:1px solid #0000FF}
  6. #btn1{width:70px;height:21px;font-size:12px;padding-top:3px; background:url(83.gif) no-repeat; height:22px; border:;}
  7. //-->
  8. </style>
  1. <body><input type="text" id="input1">
  2. <input name="button" type="button" id="btn1" onclick="myfile.click();" value="浏览文档" />
  3. <input type="file" id="myfile" onchange="input1.value=this.value" style="display:none">
  4. </body>
  1. 方法二：
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  5. <head>
  6. <meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" />
  7. <meta http-equiv="content-language" content="zh-cn" />
  8. <meta name="robots" content="all" />
  9. <meta name="keywords" content="关键字描述" />
  10. <meta name="description" content="站点描述" />
  11. <meta name="author" content="我们,we@126.com" />
  12. <meta name="copyright" content="版权所有" />
  13.  
  14. <title>css+js定义input的file浏览按钮样式兼容FireFox</title>
  15. <style type="text/css">
  16. <!--
  17. *{ margin:0; padding:0; border:0;}
  18. body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体; padding:20px;}li{list-style:none;}
  19. .clearfix:after{content:"&nbsp;";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*display:inline-block;}
  20.  
  21. .text{ border:1px solid #999;height:16px; width:300px; font-family:verdana; font-size:12px;padding-top:2px; float:left;margin-right: 5px;}
  22. .file{ width:67px;overflow:hidden; background:url(83.gif); height:22px; *vertical-align:3px; overflow:hidden; float:left;}
  23. #file{ width:0; height:20px;margin-left: -154px;*margin-left:-3px; filter:alpha(opacity=0);-moz-opacity:.0;opacity:0.0; cursor:pointer;}
  24. -->
  25. </style>
  26. </head>
  27. <body>
  28. <input type="text" class="text" id="text"/>
  29. <span class="file"><input id="file" type="file" /></span>
  30. <script type="text/javascript">
  31. <!--
  32. var file = document.getElementById("file");
  33. var text = document.getElementById("text");
  34. file.onchange = type;
  35. function type()
  36. {text.value = file.value;}
  37. -->
  38. </script>
  39. </body>
  40. </html>

input类型为file改变默认按钮样式的更多相关文章

  1. 改变input type="file" 文字、样式等

    <div class="tac"> <input type="file" id="browsefile" class=&q ...

  2. 关于django中input标签中file类型以及开路由

    0825自我总结 关于django中input标签中file类型 1.input提交图片实时展示 <img src="/static/img/default.png" wid ...

  3. HTML 5 服务器发送事件、Input 类型、表单元素、表单属性

    HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器 ...

  4. css去掉iPhone、iPad默认按钮样式

    原文链接:http://blog.sina.com.cn/s/blog_7d796c0d0102uyd2.html 只要在样式里面加一句去掉css去掉iPhone.iPad的默认按钮样式就可以了!~ ...

  5. xampp搭建服务器环境、html5新的input类型

    怎么让别人看见你写的 先把你的文档放入htdocs里面 再输入网址: http://你的IP地址/文件名 就ok了例如我的 HTML5中的input类型: <input>标签规定用户可输入 ...

  6. web app开发中 iPhone、iPad默认按钮样式问题

    webapp开发过程中,用html5+css3很方便,而且可以很方便的编译到Android ios等不同平台,但是ios需要单独处理一下,不然会出现一些想象不到的问题.下面就介绍一下各种问题的解决方法 ...

  7. iPhone、iPad默认按钮样式问题

    iPhone.iPad默认按钮样式问题 解决方法给按钮元素添加一个-webkit-appearance: none;具体代码 input[type="button"], input ...

  8. 使用MUI的日期控件引起的探索——HTML5 input类型date属性

    我写移动端的页面会用到MUI这个框架,个人觉得挺好用的,有很多实用的UI组件.当然坑还是有的,http://dev.dcloud.net.cn/mui/ui/ MUI官网,有兴趣的小伙伴可以看看 虽然 ...

  9. HTML5 新的 Input 类型

    Input 类型: color(拾色器) color 类型用在input字段主要用于选取颜色,如下所示: 支持浏览器 实例 从拾色器中选择一个颜色: 选择你喜欢的颜色: <input type= ...

随机推荐

  1. latex中的空格

    两个quad空格 a \qquad b 两个m的宽度 quad空格 a \quad b 一个m的宽度 大空格 a\ b 1/3m宽度 中等空格 a\;b 2/7m宽度 小空格 a\,b 1/6m宽度 ...

  2. EMR问题

    -- 门急诊患者生命体征信息 select t.clinic_code, t.*,t.rowid from ptm_opr_maininfo t where t.patient_id='0000E05 ...

  3. MSSQL数据库设计心得

    统一库名命名规则. 格式:公司简称_库名 如:Supesoft_Member  会员库 建库时,最好将初始大小设置为你认为可允许的最大容量.避免因为库太小,而出现系统自增加.在系统运行中,自动增加空间 ...

  4. Osmotic Study ----Mysql Safe

    Thanks Ichunqiu company.I have a chance to learn some lessons for free in five days till 10.1 this y ...

  5. 完全离线安装VSCode插件--Eslint

    最近折腾了一番,总算把Eslint插件在离线的情况下安装好了.之前查了挺多,但是很多方法还是在没有完全离线的情况下进行的.之所以想完全离线安装,主要是因为我们工作的地方是禁止访问外网的,所以像直接执行 ...

  6. EchartJS平均线、最大值、最小值

    1.先来看一个没有平均线.最大值.最小值的简单实例 option = { title: { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip: { trigge ...

  7. Aspose.Words CookieBook

    Aspose.Words.dll  版本 13.1.0.0 [原创]Aspose.Words组件介绍及使用—基本介绍与DOM概述 插入分页符 DocumentBuilder builder = new ...

  8. Google准实时数据仓库Mesa（一）

    本文来自网易云社区 作者:王潘安 以下是本人在学习Google的Mesa数据仓库论文的记录,翻译出来给大家分享,翻译水平有限,请多多包涵.因论文比较长,本人将论文按照Mesa不同的模块分开翻译,方便阅 ...

  9. TensorFlow实现卷积神经网络

    1 卷积神经网络简介 在介绍卷积神经网络(CNN)之前,我们需要了解全连接神经网络与卷积神经网络的区别,下面先看一下两者的结构,如下所示: 图1 全连接神经网络与卷积神经网络结构 虽然上图中显示的全连 ...

  10. Python3的简单的函数调用

    python3的几种传参方法(初学者): 例1: def func(x,*argv): print(x) print(argv) func('alex','wt','hjc','lao liu') 输 ...