对于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 打开浏览器 url

    public class openBrowers { public static void main(String[] args) { try { //String url = "http: ...

  2. angular js一探

    下一代angular js. 概念:mvc:作为dataModel的$scope. 还必须导入angular的库. ng-app:告诉angular引擎从这里开始是他因该管理的内容.(引入之后,可以在 ...

  3. 用ftplib爆破FTP口令

    #coding:utf-8 #author:jwong import ftplib def bruteLogin(hostname,passwordFile): with open(passwordF ...

  4. hdu 2087 剪花布条 kmp模板题

    也是kuangbin专题的 专题名字太长 不复制了…… 刚好数据结构也学了kmp 找一道题敲敲模板…… 暴力的字符串匹配是O(n*m)的时间复杂度 而kmp通过一个O(m)的预处理将字符串匹配的时间复 ...

  5. Python调用（运行）外部程序

    在Python中可以方便地使用os模块运行其他的脚本或者程序,这样就可以在脚本中直接使用其他脚本,或者程序提供的功能,而不必再次编写实现该功能的代码.为了更好地控制运行的进程,可以使用win32pro ...

  6. 什么是Bash Shell的内建(build in)命令

    1.什么是build in命令: shell内建命令是指bash(或其它版本)工具集中的命令.一般都会有一个与之同名的系统命令,比如bash中的echo命令与/bin/echo是两个不同的命令,尽管他 ...

  7. sublime插件（配合nodejs环境）

    一.首先先安装nodejs,从nodejs官网下载 www.nodejs.cn 下载完成后直接安装,选择npm package版本的进行安装,安装完成后无需配置环境变量,nodejs会自动进行配置. ...

  8. iOS Plugins

    iOS Plugins This section provides details for how to implement native plugin code on the iOS platfor ...

  9. Redis6-sorted set 的介绍

    Sort Set排序集合类型(1)介绍和set一样sorted set也是string类型元素的集合,不同的是每个元素都会关联一个权.通过权值可以有序的获取集合中的元素该Sort Set类型适合场合: ...

  10. C# lesson3

    一.局部变量和成员变量 1.程序入口(Main)要调用非静态成员(变量或方法)的话,是需要通过对象去调用的: 2.普通方法里面去调用变量或方法的话可以直接调用 成员变量(全局变量):放在Main方法之 ...