<!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:0; padding:0}

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

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

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

.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;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="28" onchange="document.getElementById('textfield').value=this.value" />

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

  </form>

</div>

</body>

</html>

文件上传input type="file"样式美化的更多相关文章

  1. css input[type=file] 样式美化，input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  2. input[type=file] 样式美化，input上传按钮美化

    <style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...

  3. Ajax 上传input type file 文件

    Html: <div class="attach-img"> <label><input type="file" id=" ...

  4. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  5. html的文件控件<input type="file">样式的改变

    一直以来,<input type="file">上传文件标签默认样式都是让人不爽的,使用它多要给它整整容什么的,当然如果用ui插件还比较方便,不能就自己来操刀实践一下! ...

  6. 文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】

    首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件< ...

  7. input[type=file]样式更改以及图片上传预览

    以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如 ...

  8. html文件上传控件file自定义样式

    问题: HTML自带的file上传按钮因在各种浏览器里显示样式不一.不易自定义样式给我们带来很大的麻烦. 解决思路: 将input[type=file]控件隐藏,使用一个input[type=text ...

  9. 改变文件上传input file类型的外观

    当我们使用文件上传功能时,<input type="file">,但是外观有点不符合口味,如何解决这个问题? <input type="file&quo ...

随机推荐

  1. html加载js那些事

    浏览器通过内置的JavaScript引擎,读取网页中的代码,对其处理后运行. JavaScript代码嵌入网页的方法 在网页中嵌入JavaScript代码有多种方法. 直接添加代码块 通过script ...

  2. javascript模式——Factory

    Facotry模式是一种创建型模式,他不同于一般编码习惯,显示的调用各个构造函数.Factory模式是提供一个通用的接口来创建对象. 一个Factory模式压缩所有对象创建的方式,降低这个工厂与其它对 ...

  3. JS 利用CNZZ进行站长统计

    利用CNZZ对网站进行站长统计 前端页面只需要在body中添加如下代码即可: <script type="text/javascript">var cnzz_proto ...

  4. asp.net实现UNIX 时间戳

    //1 将系统时间转换成UNIX时间戳    DateTime dtStart = TimeZone.CurrentTimeZone.ToLocalTime(new DateTime(1970,1,1 ...

  5. Oracle触发器Trigger2行级

    create table trigger_t2( id int, name ), age int ); /* --创建一个before update的触发器-控制每一行,行级 --只有行级的才会有:n ...

  6. mysql导出命令

    数据库备份 /data/mysql/bin/mysqldump -hlocalhost -u'root' -p'do' my_db --single-transaction -q | gzip > ...

  7. JAVA 8 新特性和改进

    Java 8的所有新特性及改进包括(JEP全称为JDK Enhancement Proposal,JDK改进建议): 语言改进: JEP 126:Lambda表达式 & 虚拟扩展方法 JEP ...

  8. Android Studio “Project Structure”选项目录结构显示异常

    在Android Studio中,可以在左上角切换项目的目录结构,project,android,等,一般切换project选项,会显示工程目录,但是,有时候就突然没有对应工程目录了.如下: 其实,看 ...

  9. Android.Hack.02_Animations

    #01# TextView 和 ImageView TextView和Imageview切换卡顿,为了实现更好的切换,可以用动画来实现,系统自带的TextViewSwitcher 和ImageView ...

  10. 如果有需要确解MD5的，可以尝试这个网站。

    http://www.hashkiller.co.uk/md5-decrypter.aspx