对于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. Android记住密码自动登录的实现

    我采用的是SharedPreferences来存取数据的,所以先简单的介绍一下SharedPreferences SharedPreferences是Android平台上一个轻量级的存储类,主要是保存 ...

  2. C++之指针例题解析

    看了挺长一段时间的C了,基本上是把基础语法过关了,偶然遇见一个C++的面试题,分析一下,作为一段时间的打卡. 代码在编译器里边打一下, #include <iostream> using ...

  3. ajax jsonp 跨域请求

    $.ajax({ type:"get", url: "http://localhost/test/a.php", dataType: "jsonp&q ...

  4. 精通javasCRIPT-学习笔记 Features,Functions,Object

    关于学习javasCRIPT的书,市面上太多了,有犀牛书,红宝书,但是他们都类似于一本书,包含js的一切,并没有站在一个高度上,看js的本质,我计划看一看jquery作者resig写的<精通ja ...

  5. timeit模块 与 time模块，计时的区别

    time  模块,理解容易 import time time_start = time.time() time_end = time.time() time_use = time_end - time ...

  6. 关于Java泛型的新解

    ////////////////////////////////////////////////////////////////////////////////为了方便您的观看,请在web版式视图在观 ...

  7. hdu 1839 Delay Constrained Maximum Capacity Path

    最短路+二分. 对容量进行二分,因为容量和时间是单调关系的,容量越多,能用的边越少,时间会不变或者增加. 因为直接暴力一个一个容量去算会TLE,所以采用二分. #include<cstdio&g ...

  8. 明天学习一下验证码的匹配和thinkphp第十三章

    333333333 js 冒泡排序 var arr=[17,19,5,90,3];window.onload=function(){// alert(arr[0]);var len=arr.lengt ...

  9. 【Python@Thread】threading模块

    theading模块的Thread类 属性: name 线程名 ident 线程标识符 daemon  布尔值,标示是否为守护线程 方法: __init__(target=None, name=Non ...

  10. 【LeetCode】456. 132 Pattern

    Given a sequence of n integers a1, a2, ..., an, a 132 pattern is a subsequence ai, aj, ak such that  ...