对于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. [M]表格中的天正文字转换问题

    若表格中含有天正文字,则不能使用MagicTable直接转换,需要先EXPLODE命令分解(快捷键为x),天正单行文字和天正多行文字都可以使用该命令分解为普通AutoCAD单行文字,分解后即可正常转换 ...

  2. React native android 最常见的10个问题

    这里逐条记录下最容易遇到的React native android 相关case: 1. app启动后,红色界面,unable load jsbundle : 解决办法:一般来说就是,你是用dev-s ...

  3. ubuntu 14.04—解决软件中心进度条卡死的问题

    软件中心下载安装软件进度条卡住了,这时候解决方法为: 先解锁: sudo rm -rf /var/lib/dpkg/lock 如果此时开启软件中心,发现进度还在, 那么我们需要找到相关的进程关闭他,使 ...

  4. Java Script 学习笔记

    JS编程习惯类: 1. 命名 著名的变量命名规则 只是因为变量名的语法正确,并不意味着就该使用它们.变量还应遵守以下某条著名的命名规则: Camel 标记法 首字母是小写的,接下来的字母都以大写字符开 ...

  5. maven package:Max maven Unsupported major.minor version 51.0

    编译maven项目时报错:Max maven Unsupported major.minor version 51.0 major.minor version 51.0 对应的是JDK1.7 majo ...

  6. unsupported major.minor version 52.0，错误

    Make sure that all the classes needed by the application have been compiled with a compatible java v ...

  7. sql server 2012提示评估期已过的解决办法 附序列号

    sql server 2012提示评估期已过的解决方法: 第一步:进入SQL2012配置工具中的安装中心. 第二步:再进入左侧维护选项界面,然后选择选择版本升级. 第三步:进入输入产品密钥界面,输入相 ...

  8. 重读The C programming Lanuage 笔记四：c预处理

    C预处理器执行宏替换.条件编译以及包含指定的文件.以#开头的命令行就是与处理器的对象.这些命令行的语法独立于语言的其他部分,它们可以出现在任何地方,其作用可延续到所在编译单元的末尾(与作用域无关).行 ...

  9. Unity3d中Dictionary和KeyValuePair的使用

    using UnityEngine; using System.Collections; using System.Collections.Generic;public class test : Mo ...

  10. hbase伪分布

    1.编辑 conf/hbase-env.sh来告知HBase java的安装路径.在这个文件里你还可以设置HBase的运行环境,诸如 heapsize和其他 JVM有关的选项, 还有Log文件地址,等 ...