<!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. NSString 遍历

    遍历NSString网上大多数有两种方法 最简单有效的是: NSString *name=[[NSString alloc] initWithFormat:@"小猫咪爱上大老鼠!!" ...

  2. centos yum 完全卸载依赖

    centos yum 完全卸载依赖    you install a package with yum install, say pdftk, it will pull in a lot of dep ...

  3. java总结

    JUC概况 以下是Java JUC包的主体结构: ? Atomic : AtomicInteger ? Locks : Lock, Condition, ReadWriteLock ? Collect ...

  4. Python Challenge

    0. 2的38次方 print 2**38 ##apply the result to the url 1. 看图是要right shift两位, 切片即可. import string intab ...

  5. 浏览器加载模式：window.onload和$(document).ready()的区别(详解)

    jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: wind ...

  6. Sublime_调试PHP编译系统设置.

    工具->编译系统->新建编译系统 {         "cmd": ["C:\\wampserver\\bin\\php\\php5.3.13\\php.ex ...

  7. cocos2d-x box2d使用调试绘图

    cocos2d-x box2d使用调试绘图 复制TestCpp的GLES-Render.h和GLES-Render.cpp过来. 添加一个成员变量: GLESDebugDraw *m_debugDra ...

  8. linux命令学习（1）

    linux下的文件命名规则 1)除了/ 之外,所有的字符都合法. 2)有些字符最好不用,如空格符.制表符.退格符和字符@ # $ & ( ) - 等. 3)避免使用. 作为普通文件名的第一个字 ...

  9. 分布式拒绝服务攻击(DDoS)原理及防范【转】

    DDoS攻击概念 DoS的攻击方式有很多种,最基本的DoS攻击就是利用合理的服务请求来占用过多的服务资源,从而使合法用户无法得到服务的响应. DDoS攻击手段是在传统的DoS攻击基础之上产生的一类攻击 ...

  10. 如风一样，飞翔------Day37

    我一直都觉得自己是个反应没有那么敏锐的人,而不幸的是其实也是,所以,在菜鸟的头衔上,我不得不再背负上一个笨鸟的"光芒".我不苛求一飞冲天的传奇,却也有着不甘寂寞的激昂,我选择先飞, ...