最近才开始学习HTML,在练习表单的过程中,发现在使用<input type="file"/>这个类型的元素,产生的文件框和浏览按扭,它们的样式往往不符合我们的需要。怎么改变呢,我上网搜索了一些方法,说的是设置将file隐藏,然后用一个按钮覆盖就可以了,我总结了一下之后,具体方法如下:

1、放一个text类型的文本框。
   2、放一个button类型的按扭。
   3、放一个file类型。
   4、调整button和file的样式,目标:将file隐藏,使其位置和button位置重叠。
   5、当上传框file的值有所改变时通过onchange事件句柄执行text.value=this.value,即保持真正的上传框与模拟的上传框的值同步更新。

具体的代码如下:

<input type="text" name="txt">
<input type="file" name="fil" style="display: none" onchange="txt.value=this.value">
<button onclick="fil.click()">浏览...</button>
就这样轻松解决了

<input type="file">中怎设置那个按钮的样式的更多相关文章

  1. javaWeb - 2 — ajax、json — 最后附:后台获取前端中的input type = "file"中的信息 — 更新完毕

    1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...

  2. input[type=file]中使用ajaxSubmit来图片上传

    今天在使用input[type=file]上传图片到服务器时,因为项目要求,并不是像常见的通过按钮来提交表单事件,而是图片上传后就自动执行表单提交事件,将上传的图片信息传给服务器. 刚开始我是这样执行 ...

  3. input type="file"在各个浏览器下的默认样式,以及修改自定义样式

    一.<input type="file"/>在各个浏览器中的默认样式: 系统 浏览器 样式效果 点击效果 mac google 点击按钮和输入框都可以打开文件夹 mac ...

  4. JQuery------获取<input type="file">中的文件内容

    html <div class="File">添加附件</div><input id="upfile" name="up ...

  5. HTML5读取input[type=file]中的图片

    转载 https://blog.csdn.net/fd214333890/article/details/71250488

  6. 有关图片上传的相关知识input type=file,HTML5的 input:file上传类型控制

    遇到项目,要求做一个影像系统,对于前端开发需要了解file的相关属性,以及如何开发.工欲善其事,必先利器嘛.度娘一阵子搜索,找资料.这年头,需要的是你解决问题的能力啊! 参考应用:https://ww ...

  7. input type="file"使用

    问题: 在实际开发过程中,会遇到上传文件的一些需求.但是使用原生的<input type="file" />在使用中存在一些问题 在未上传文件时,显示"no ...

  8. 文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】

    首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件< ...

  9. html中,文件上传时使用的<input type="file">的样式自定义

    Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...

随机推荐

  1. WLST 命令和变量

    下列部分将详细描述 WLST 命令和变量.主题包括:  WSLT 命令类别概述  浏览命令  控制命令  部署命令  诊断命令  编辑命令  信息命令  生命周期命令  节点管理器命令  树命令  W ...

  2. PowerDesigner反向工程,根据Oracle数据库结构生成ER图(2014-3-25记)

    01.添加数据服务端 02. PowerDesigner 1. 新建PDM:选择菜单File->New Model,[Model type]选择Physical Data Model,[DBMS ...

  3. js瀑布流

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  4. zoj 3673 1729

    1729 Time Limit: 3 Seconds      Memory Limit: 65536 KB 1729 is the natural number following 1728 and ...

  5. LPCTSTR 用法

    L表示long指针       这是为了兼容Windows  3.1等16位操作系统遗留下来的,在win32中以及其他的32为操作系统中,  long指针和near指针及far修饰符都是为了兼容的作用 ...

  6. 数据库事务的特性(ACID)

    数据库的事务是数据库中一系列(增删查改)操作的集合. 一般来说,事务的范围根据业务而定,比如转账.修改个人信息 转账:从A账户将200元转移到B账户 从A账户中扣除200元 将200元加入到B账户中 ...

  7. [问题2014S15] 复旦高等代数II(13级)每周一题(第十五教学周)

    [问题2014S15]  设 \(O\) 为 \(n\) 阶正交阵,\(A=\mathrm{diag}\{a_1,a_2,\cdots,a_n\}\) 为实对角阵, 证明: 方阵 \(OA\) 的特征 ...

  8. 3个常用基于Linux系统命令行WEB网站浏览工具(w3m/Links/Lynx)

    一般我们常用的浏览器肯定是基于可视化界面的图文结合的浏览界面效果,比如FireFox.Chrome.Opera等等,但是有些时候折腾和项目 的需要,在Linux环境中需要查看某个页面的文字字符,我们需 ...

  9. Rails,uva 514

    题目:铁轨 题目链接:UVa514链接 题目描述: 某城市有一个火车站,有n节车厢从A方向驶入车站,按进站的顺序编号为1-n.你的任务是判断是否能让它们按照某种特定的顺序进入B方向的铁轨并驶入车站.例 ...

  10. java高薪之路__001_类

    Java中内部类分四种:成员内部类.局部内部类.静态内部类和匿名内部类.要注意静态内部类的调用方式与其他不同,采用的是类似调用类中的静态属性.静态方法的方式 Multi Level 调用不同类中的相同 ...