<!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][RBAC]Yii中应用RBAC完全指南

    开端筹办 Yii供给了强大的设备机制和很多现成的类库.在Yii中应用RBAC是很简单的,完全不须要再写RBAC代码.所以筹办工作就是,打开编辑器,跟我来. 设置参数.建树数据库 在设备数组中,增长以下 ...

  2. codeforces 714C解题报告

    http://codeforces.com/contest/714/problem/C #include <bits/stdc++.h>//非递归形式建立字典树 using namespa ...

  3. runnable:在线IDE+代码片段分享

    在我之前的博客20个最好的在线IDE中列举过很多在线IDE,可以很方便的在云端执行代码,这样在你手头没有编译器时想试个小程序会非常有用. 今天介绍的这个网站runnable把在线IDE和代码片段结合了 ...

  4. PHP环境配置综合篇

    1.WNMP: http://www.wnmp.com.cn/     En: https://www.getwnmp.org/ 2.xampp:https://www.apachefriends.o ...

  5. js 设置cookie

    function GetCookieVal(offset) // 获得Cookie解码后的值 { var endstr = document.cookie.indexOf(";", ...

  6. 格式化日期时间字符串 Get-Date -Uformat , -format

    #将字符串格式化为时间格式 $dateTimeStr = '20141231T23:59:59' $format = 'yyyyMMddTHH:mm:ss' $formatProvider = [Gl ...

  7. 最简单的基于FFMPEG的视频编码器（YUV编码为H.264）

    本文介绍一个最简单的基于FFMPEG的视频编码器.该编码器实现了YUV420P的像素数据编码为H.264的压缩编码数据.编码器代码十分简单,可是每一行代码都非常重要,适合好好研究一下.弄清楚了本代码也 ...

  8. TCP参数设置

    我们这里应用的是CentOS5.3,并内核使用的是2.6.18-128.el5PAE #1 SMP .修改部分TCP ,有的是为了提高性能与负载,但是存在降低稳定性的风险.有的则是安全方面的配置,则有 ...

  9. 基于heartbeat的单播方式实现tomcat高可用

    1.节点规划 在master.backup节点上添加eth0.eth1两网卡,具体添加过程,参考“基于VMware为CentOS 6.5配置两个网卡” 2.IP规划   master backup e ...

  10. 功能模块图、业务流程图、处理流程图、ER图，数据库表图（概念模型和物理模型）画法

    如果你能使用计算机规范画出以下几种图,那么恭喜你,你在我这里被封为学霸了,我膜拜ing-- 我作为前端开发与产品经理打交道已有5-6年时间,产品经理画的业务流程图我看过很多.于是百度搜+凭以往经验脑补 ...