对于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. Openjudge-NOI题库-简单算术表达式求值

    题目描述 Description 两位正整数的简单算术运算(只考虑整数运算),算术运算为: +,加法运算:-,减法运算:*,乘法运算:/,整除运算:%,取余运算. 算术表达式的格式为(运算符前后可能有 ...

  2. Spring.net 学习

    最近一段时间,在学习spring.net方面的知识,spring.net是什么,spring.net是用来干什么的,我们这里就不在介绍了,spring.net有两方面的内容---IOC(DI)与AOP ...

  3. OvS: ovs-ofctl adding parameters analysis

    if using dpdk, then OvS' datapath folder is ignored. Only OvS' userspace code are in use. According ...

  4. 3.linux常用软件的安装方法

    linux 上的软件不像windows上直接运行安装那么容易,在linux上有很多不同的安装包,大概常见的就有deb.tar.gz.tar.bz(tar.bz2).rpm等类型文件 1.deb文件安装 ...

  5. CodeForces 703B Mishka and trip

    简单题. 先把环上的贡献都计算好.然后再计算每一个$capital$ $city$额外做出的贡献值. 假设$A$城市为$capital$ $city$,那么$A$城市做出的额外贡献:$A$城市左边城市 ...

  6. hdu1022

    #include <stdio.h>#include <string.h> int main(void){ int n,i,j,k,l; char o1[10],o2[10], ...

  7. scp免密码传送文件

    一.单向 ssh-keygen -t rsa 单向无密码访问远程服务器操作比较简单,比如服务器A需要无密码访问服务器B(A–>B),那么只需要在服务器A生成密钥对,将生成的公钥上传到服务器B的相 ...

  8. PostgreSQL学习手册

    事实上之前有很长一段时间都在纠结是否有必要好好学习它,但是始终都没有一个很好的理由说服自己.甚至是直到这个项目最终决定选用PostgreSQL 时,我都没有真正意识到学习它的价值,当时只是想反正和其它 ...

  9. POJ 2350 Above Average

    Description It is said that 90% of frosh expect to be above average in their class. You are to provi ...

  10. Ubuntu ctrl+alt+b快捷键冲突

    安装了搜狗拼音后,其快捷键ctrl+alt+b会启动软键盘,造成与其他编辑器快捷键的冲突. 为了禁止使用ctrl+alt+b启动软键盘,可以: 1. 在搜狗拼音输入法选择设置 2. 高级设置 3. 高 ...