<!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. Yii AR Model CRUD数据库操作

    Yii AR很好很强大,但刚开始不知道怎么使用,可以先看下官方文档 官方文档:http://www.yiichina.com/guide/database.ar 下面是我对AR的一些理解 对于一个Mo ...

  2. CSS 最核心的几个概念

    CSS 中最核心的几个概念,包括:盒模型.position.float等. 这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成. 元素类型 HTML 的元素可以分为两种: 块级 ...

  3. 批处理(.bat)中使用相对路径

    批处理中使用相对路径,只需要用cd /d %~dp0代替绝对路径就可以了. ->cd /d ->%~dp0 %0为当前批处理文件 %~d0 是指批处理所在的盘符 %~dp0 是指批处理所在 ...

  4. Python中的判断、循环 if...else，while

    if...else语句: a=3; b=3; if a == b :print(a,b)elif a <= b :print(str(a) + " is less than " ...

  5. Windows XP下安装WinCE6.0开发环境

    Windows下怎样编译WinCE6.0及开发应用程序.以下介绍(安装之前必须保证C盘有足够的空间!20g左右!主要是由于在安装程序在安装过程中要解压): 在Visual Studio 2005之前, ...

  6. keepalive support-----Programming applications

    TCP Keepalive HOWTO Prev   Next 4. Programming applications This section deals with programming code ...

  7. Android（java）学习笔记175：BroadcastReceiver之 外拨电话的广播接收者

    首先我们示例工程一览表如下: 1.首先我们还是买一个收音机,定义一个OutCallReceiver继承自BroadcastReceiver,onReceive()方法中定义了监听到广播,要执行的操作: ...

  8. 测试cnblogs是否存在链接引用的bug

    如果来源页弹出了一个对话框,或者跳转到了本页面,说明来源页面存在链接引用的bug

  9. cocos2dx_moveby_n_moveto

    对于参数(SEC, POINT)来说,CCMoveTo是移动到WND的绝对的POINT,CCMoveBy是相对当前位置移动一个相当于(0,0)到POINT的向量.

  10. 第三篇：web之前端之JavaScript基础

    前端之JavaScript基础   前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...