<!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. think in python 11 字典

    字典 字典类似于列表,但更加通用 键值对 ,字典是 键与值之间的映射,每个键都映射到一个值上 dict可以创建一个不包含任何项的字典 eng2sp = dict() print eng2sp 还可以给 ...

  2. css系列教程--文本

    text-align:规定文本的水平对齐方式.left/right/center/justify(两端对齐)/inherit(继承) text-decoration:添加到文本的效果.下划线,中间线等 ...

  3. iOS学习心得——UINavigationController

            UINavigationController和UItableviewController一样也是iOS开发中常用的控件之一,今天就来学习一下它的常见用法.         有人说tab ...

  4. panel控件 换行

    Panel1.Controls.Add(new LiteralControl("<BR/>"));

  5. Jsoup小Demo

    Jsoup小Demo public class JsoupUtil { public void parseWangYi() { Document doc = null; try { //eg1:解析百 ...

  6. PhpStorm 4.0 & 5.0 部署本地Web应用

    1.创建新的项目(project),创建完成之后单击工具栏的应用运行/调试(Select Run/Debug Configuration)的下拉菜单弹出 Edit Cofigurations选项,单击 ...

  7. 关于Android新建出错：Errors occurred during the build. Errors running builder 'Android Resource M

    新建一个eclipse的工作空间就可以了. fuck~

  8. Android项目记录点滴

    服务器端:(根据Apache POI库函数其中SlideShow表示PPT文档,Slide表示某一张幻灯片) 1.先把电脑中的PPT文件读入到一个字节数组中.(输入流-->字节数组-->输 ...

  9. Android04－UI01常用控件

    1.常见控件的使用: TextView Button EditText ImageView   1.TextView <TextView android:id="@+id/text_v ...

  10. FreeRTOS 中断优先级嵌套错误引发HardFault异常解决

          最近在使用FreeRTOS的时候,突然发现程序在运行了几分钟之后所有的任务都不再调用了,只有几个中断能正常使用,看来是系统挂掉了,连续测试了几次想找出问题,可是这个真的有点不知所措.   ...