<!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. asp.net mvc 生成条形码

    using System; using System.Collections; using System.Collections.Generic; using System.Drawing; usin ...

  2. iOS开发那些事儿（六）Git分之策略

    git 分支策略 将要介绍的这个模型不会比任何一套流程内容多,每个团队成员都必须遵守,这样便于管理软件开发过程. 既分散又集中 我们使用的,且与这个分支模型配合的非常好的库,他有一个“真正”的中央仓库 ...

  3. 总结PHP中几种常用的网页跳转代码

    网页跳转的意思就是指当你在浏览器中访问A页面时,会自动跳转到B页面,往往网页跳转用在404页面中会比较多点.至于怎么实现网页跳转,网上已经提供了很多的方法,有些方法是不可行的,经过测试,叶德华今天就在 ...

  4. hdu1004Let the Balloon Rise

    Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...

  5. android MVC理解

    算来学习Android开发已有2年的历史了,在这2年的学习当中,基本掌握了Android的基础知识.越到后面的学习越感觉困难,一来是自认为android没啥可学的了(自认为的,其实还有很多知识科学), ...

  6. 屏蔽错误:LNK2038

    最近在使用Qt(VS2010编译)的过程中,需要调用COM库,在Qt中加入了QAxContainer模块,是一个LIB库,在把编译模式从Debug改为Release 后链接报告了一堆错误 -1: 错误 ...

  7. Servlet 浅谈(三)

    关于Session 关于http协议后面会有一系列文章专门介绍.这里就大概了解一下:首先需要知道一点:HTTP是无状态的. 什么是无状态呢? 客户与服务器建立连接.发出请求.得到响应.关闭连接.整个流 ...

  8. Android_CodeWiki_03

    1.发送不重复的通知(Notification) public static void sendNotification(Context context, String title, String m ...

  9. mysql zk切换整个过程

    <pre name="code" class="html">mysql master: test:/root/zk# cat zk.pl use Z ...

  10. 在 Windows Azure 网站中进行纵向扩展和横向扩展

    编辑人员注释:本文章由 Windows Azure 网站团队的项目经理 Byron Tardif 撰写. 当您开始一个新的 Web 项目,或者刚刚开始开发一般的网站和应用程序时,您可能希望从小处着手. ...