<!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{ 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. input[type=file]样式更改以及图片上传预览

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

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

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

  3. 文件上传input type="file"样式美化

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

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

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

  5. 知识点：定义input type=file 样式的方法（转）

    ——“当我们想要用css美化表单的时候,有两个控件就会和前段人员作对,一个是是大名鼎鼎的select,另一个就是我现在要说说的 input type=file” 为什么要美化file控件?试想一下,别 ...

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

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

  7. CSS <input type="file">样式设置

    这是最终想要的效果~~~ 实现很简单,div设置背景图片,<input type="file"/>绝对定位上去再设置opacity:0(透明度为0 ) 直接上代码,希望 ...

  8. 点击之后上传图片到页面 input type="file" 样式

    <!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/ht ...

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

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

  10. input type= file 如何更改自定义的样式

    input { @include wh(24px,22px);//sass 宽高 @include pa(0,0); //绝对定位 top:0:left:0: opacity: 0; //透明度: o ...

随机推荐

  1. JAVA虚拟机简介

    Java虚拟机定义 Java虚拟机有多层含义 一套规范:Java虚拟机规范.定义概念上Java虚拟机的行为表现 一种实现:例如HotSpot,J9,JRockit.需要实现JVM规范,但具体实现方式不 ...

  2. 380. Insert Delete GetRandom O(1)

    经过昨天的消沉 今天我振作了 设计个数据结构,添加,删除,随机获取都是O(1). 怎么会有这么牛逼的数据结构,所以肯定相应的要耗费空间. 添加和获取耗时O(1)是Array的特性,或者说是Map/Ta ...

  3. 大文件遍历shell脚本

    要求说明: 一.普通方法 无读写磁盘优化 有写磁盘优化 有读写磁盘优化 问题:脚本执行越来越慢 top ps aux vmstat 查看系统运行情况正常. 二.AWK 三.perl

  4. Sysinternals Suite实用程序工具包

    Sysinternals Suite是微软出品的一套集成数十个绿色软件的实用程序工具包.就在2014年1月29日(官方日期),迎来了2014新版本 AccessChk为了确保创建安全的环境,Windo ...

  5. Linux进程间通信——使用数据报套接字

    前一篇文章, Linux进程间通信——使用流套接字介绍了一些有关socket(套接字)的一些基本内容,并讲解了流套接字的使用,这篇文章将会给大家讲讲,数据报套接字的使用. 一.简单回顾——什么是数据报 ...

  6. [WebGL入门]十四，绘制多边形

    注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家 ...

  7. BeanUtils使用概要

    BeanUtils是apache提供的的一个工具类,在很多地方我们都要用到这个类.下面说说这个类的简单用法. 相关的使用细节已经在代码的注释中说明了. @Test public void test5( ...

  8. yo bootstrap mui 使用对比

    昨天晚上 又被问及职业发展方向,提及我的老本行css,切了几年的页面,近两年投入进css的时间屈指可数,被问及之前公司用的yo框架 对比业界内其他css 框架的优势. 1. yo模块化,碎片化  可自 ...

  9. C#开发的进化史

    1.数据类型的进化 C#1中实现Product类型代码 public class Product { string name; public string Name { get { return na ...

  10. [XML] C#ResourceManagerWrapper帮助类 （转载）

    点击下载 ResourceManagerWrapper.rar /// <summary> /// 类说明:ResourceManagerWrapper /// 编 码 人:苏飞 /// ...