对于type="file"而言是一个不大好看的控件。如果不美化他一下，总感觉自己的网站有些缺乏了美感

上代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>定义input type="file" 的样式</title>

<style type="text/css">

body{ font-size:14px;}

input{ vertical-align:middle; margin:; padding:}

.file-box{ position:relative;width:340px}

.txt{ height:22px; border:1px solid #cdcdcd; width:190px;}

.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px; }

.file{ position:absolute; top:; right:80px; height:24px; filter:alpha(opacity:);opacity: ;width:260px }

</style>

</head>

<body>

<div class="file-box">

  <form action="" method="post" enctype="multipart/form-data">

 <input type='text' name='textfield' id='textfield' class='txt' />

 <input type='button' class='btn' value='浏览...' />

    <input type="file" name="fileField" class="file" id="fileField" size="" onchange="document.getElementById('textfield').value=this.value" />

 <input type="submit" name="submit" class="btn" value="上传" />

  </form>

</div>

</body>

</html>

样式说明：

　上面的是用了一个text和一个按钮去伪装成了一个type="file"控件；实则控件本身为隐藏状态；

而怎么实现点击即点控件，就用到了绝对定位

filter:alpha(opacity:0);opacity: 0; 前者是适合ie8一下的浏览器用于过滤用的，后者用现在的很多的浏览器。这个值趋近于0基本就是透明状态了

美化type="file"控件的更多相关文章

  1. 美化 input type=file控件

    大家都知道input的type=file控件默认样式是不能修改的 可以通过一个小技巧处理下 html: <a href="javascript:;" class=" ...

  2. 页面加载完成触发input[type="file"]控件问题

    由于浏览器厂家的限制,不同的浏览器不开放页面加载完成就允许触发input[type="file"]控件 测试 Chrome .火狐 .IE .微信客户端QQ =>桌面端: C ...

  3. input的file 控件及美化

    在一些网站进行上传时,当单击了“浏览”按钮之后会弹出[选择文件]的对话框.想要实现这一功能,用input的file控件来实现就好啦~ <!doctype html> <html la ...

  4. HTML5中的input type为file控件限制上传文件类型及扩展

    简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开:2.html和htm这样的要写成两个: 3实例: <input type="file" na ...

  5. File控件选择图片的时候在Html5下马上预览

    页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...

  6. 怎么清除file控件的文件路径

    还记得上次做一个文件上传,后来测试告诉我说,如果我要是不选择文件了呢?该怎么办?我说:简单啊,做一个取消按钮不就完事了吗!然后我就想一个file空间做一个取消是多么简单的事,用js处理可是想怎么样就怎 ...

  7. 为什么Jquery对input file控件的onchange事件只生效一次

    今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解 ...

  8. File控件杂谈

    我们通常使用<input type='file'/>来实现网页中文件上传功能,用户可以通过点击file控件选择本地文件,当我们提交包含该控件的表单时,浏览器会向服务器发送用户选中的文件. ...

  9. js动态添加file控件

    <html></head><script language="javascript" type="text/ecmascript" ...

随机推荐

  1. java通过JDBC链接SQLServer2012 （含1433端口打通）

    首先,在连接数据库之前必须保证SQL Server 2012是采用SQL Server身份验证方式而不是windows身份验证方式.如果在安装时选用了后者,则重新设置如下: http://blog.1 ...

  2. 改造vim

    1.安装Vim和Vim基本插件首先安装好Vim和Vim的基本插件.这些使用apt-get安装即可: lingd@ubuntu:~/arm$sudo apt-get install vim vim-sc ...

  3. Openjudge-NOI题库-垂直直方图

    题目描述 Description 写一个程序从输入文件中去读取四行大写字母(全都是大写的,每行不超过72个字符),然后用柱状图输出每个字符在输入文件中出现的次数.严格地按照输出样例来安排你的输出格式. ...

  4. TDD(测试驱动开发)的推广方法论

  5. bigdata之hadoop and spark

    目前正在学习Hadoop和spark之类的东西,一个月把Hadoop的基础东西过了一遍,但是感觉好动都没跟上老师的课程,哪位前辈了解这方面的东西希望给指点迷津.接下来我们还要学习spark和nosql ...

  6. yii2.0 面包屑的使用

    yii2中面包屑是yii2自带的小部件,类似本网站的导航栏应该就是采用面包屑来完成的 例子如下,需要引入 yii\widgets\Breadcrumbs echo Breadcrumbs::widge ...

  7. laravel php artisan migrate 数据迁移时出现的[HY000][1045]错误

    (zz找了块一个小时才发现)主要的错误在于.env文件和database.php的配置不匹配. 1.找到.env文件 2.更改数据库表账密 3.改database.php的数据库账密 4.完成

  8. fiddler抓包使用①

    链接:http://jingyan.baidu.com/article/3a2f7c2e0d5f2126aed61175.html   设置好代理后,有的设备需要访问"192.168.1.1 ...

  9. HDU猜数字

    G - 猜数字 Time Limit:10000MS       Memory Limit:32768KB       64bit IO Format:%I64d & %I64u Descri ...

  10. NewtonJson中转义的斜杠\和多余的引号处理

    使用newtonjson序列化的json串正常的,但通过网络传输后,会再包装一层引号和对原有定义引号的转义,最后结果就变成这种数据: “\"{\\\"State\":fa ...