<!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. jmx使用应该注意的基本规范

    1.标准MBean 名称必需是在要监控的类名后面加上“MBean ”. 2.监控的类和MBean 接口必需在同一包下,也可以理解为注册的接口名字必须以MBean结尾,接口实现类比接口名字少了MBean ...

  2. DevExpress GridControl一些属性使用方法总结

    一.如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 二.如何新增一条记录 (1).gridView.AddN ...

  3. [DevExpress]图表开发工具类 ChartUtils

    /// <summary> /// 基于.NET 3.5的Chart工具类;对应的DevExpress版本:12.1.7; /// </summary> public stat ...

  4. uinavagation 透明代码

    NSShadow *shadow = [[NSShadow alloc] init]; [shadow setShadowOffset:CGSizeMake(1, 1)]; [shadow setSh ...

  5. html css float left与 float right的使用说明

    点评: CSS中很多时候会用到浮动来布局,也就是经常见到的float:left或者float:right,简单点来说,前者是左浮动(往左侧向前边的非浮动元素飘,全是飘得元素的话,就按照流式来浮动从左到 ...

  6. Hibernate学习之注解学习

    转自:http://blog.sina.com.cn/s/blog_935ebb670101dnre.html 1.类级别注解 @Entity   映射实体类 @Table    映射数句库表 @En ...

  7. dede调取文章内容的第一张图片

    dede调用文章第一张图片(非缩略图)的实现方法 这篇文章主要是介绍dede调用文章第一张图片的实现代码,需要的朋友可以参考下 需要进行两个操作 第一步,修改include/extend.func.p ...

  8. 用apiCloud开发应用

    使用apiCloud开发应用就是用html5写页面,css实现样式,js写功能.一套代码在android和ios上都能运行.节省开发周期和人员开销. 代码可以放到云服务器,可以云端打包,云端更新. a ...

  9. Javascript 多物体运动——逐行分析代码，让你轻松了解运动的原理

    我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. <style type="text/css"> div { width: 100px; heig ...

  10. cordova开发中遇到的一些坑

    # 外域的JS被禁止,修改meta标签 <meta http-equiv="Content-Security-Policy" content="default-sr ...