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

方法一：

<input type="text" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">

<input type="button" value="浏览" onclick="path.click()" style="border:1px solid #ccc;background:#fff">

<input type="file" id="path" style="display:none" onchange="upfile.value=this.value">
也可以写成这样：

<style type="text/css">

<!--

#input1{border:1px solid #0000FF}

#btn1{width:70px;height:21px;font-size:12px;padding-top:3px; background:url(83.gif) no-repeat; height:22px; border:;}

//-->

</style>
<body><input type="text" id="input1">

<input name="button" type="button" id="btn1" onclick="myfile.click();" value="浏览文档" />

<input type="file" id="myfile" onchange="input1.value=this.value" style="display:none">

</body>
方法二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" />

<meta http-equiv="content-language" content="zh-cn" />

<meta name="robots" content="all" />

<meta name="keywords" content="关键字描述" />

<meta name="description" content="站点描述" />

<meta name="author" content="我们,we@126.com" />

<meta name="copyright" content="版权所有" />

<title>css+js定义input的file浏览按钮样式兼容FireFox</title>

<style type="text/css">

<!--

*{ margin:0; padding:0; border:0;}

body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体; padding:20px;}li{list-style:none;}

.clearfix:after{content:"&nbsp;";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*display:inline-block;}

.text{ border:1px solid #999;height:16px; width:300px; font-family:verdana; font-size:12px;padding-top:2px; float:left;margin-right: 5px;}

.file{ width:67px;overflow:hidden; background:url(83.gif); height:22px; *vertical-align:3px; overflow:hidden; float:left;}

#file{ width:0; height:20px;margin-left: -154px;*margin-left:-3px; filter:alpha(opacity=0);-moz-opacity:.0;opacity:0.0; cursor:pointer;}

-->

</style>

</head>

<body>

<input type="text" class="text" id="text"/>

<span class="file"><input id="file" type="file" /></span>

<script type="text/javascript">

<!--

var file = document.getElementById("file");

var text = document.getElementById("text");

file.onchange = type;

function type()

{text.value = file.value;}

-->

</script>

</body>

</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. Bootstrap 组件之 List group

    简介 List group 指列表.当然,Bootstrap 列表不局限于由 <ul> 和 <li> 标签构成的. Bootstrap 中一共三种列表的构成方式,这里 有一个例 ...

  2. c#中public，private,protected,internal的区别

    public   可以被外部成员调用  private   只能在被类的成员调用   protected   只能在被类的成员和该类的子类调用   internal   可以在当前项目调用   pub ...

  3. vs2010 怎样设置文本编辑窗口和解决方案资源管理器同步？

    即切换左边的文本编辑窗口,解决方案资源管理器如何定位到相应的文件项上?答案: 工具--选项--项目和解决方案--常规--在解决方案资源管理器中跟踪活动项(前打勾)确定 应该就可以了.

  4. 平衡树学习笔记（2）-------Treap

    Treap 上一篇:平衡树学习笔记(1)-------简介 Treap是一个玄学的平衡树 为什么说它玄学呢? 还记得上一节说过每个平衡树都有自己的平衡方式吗? 没错,它平衡的方式是......rand ...

  5. 「洛谷P3768」简单的数学题 莫比乌斯反演+杜教筛

    题目链接 简单的数学题 题目描述 输入一个整数n和一个整数p,你需要求出 \[\sum_{i=1}^n\sum_{j=1}^n (i\cdot j\cdot gcd(i,j))\ mod\ p\]  ...

  6. asyncjs，waterfall的使用

    waterfall waterfall(tasks, [callback]) (多个函数依次执行,且前一个的输出为后一个的输入) 按顺序依次执行多个函数.每一个函数产生的值,都将传给下一个函数.如果中 ...

  7. SpriteBuilder 不能对设置spriteframe的sprite进行设置dynamic Physics解决办法

    可能spriteBuilder是最新推出 cocos2d 可视化,在学习过程中遇到一些Bug,比如你对一个精灵设置了一个动画帧(spriteframe),这并不会改变他的物理属性,正常来说是可以设置他 ...

  8. GIS有关GP服务的发布和调用

    打印服务范例:http://blog.csdn.net/jingxinwjb/article/details/51906464 1.通过Modelbuilder新建工具.(注意:假如工具输出两个以上的 ...

  9. 项目笔记《DeepLung:Deep 3D Dual Path Nets for Automated Pulmonary Nodule Detection and Classification》（一）预处理

    最近一个月都在做肺结节的检测,学到了不少东西,运行的项目主要是基于这篇论文,在github上可以查到项目代码. 我个人总结的肺结节检测可以分为三个阶段,数据预处理,网络搭建及训练,结果评估. 这篇博客 ...

  10. C语言中的副作用、序列点、完整表达式

    C语言中有个术语叫:副作用 副作用其实是对数据对象或文件的修改.(数据对象的定义是:用于存储值的数据存储区域) 例如语句 states = 50; 从C语言的角度来讲:这个赋值表达式的副作用是将变量的 ...