浏览器默认的<input type="file">真是巨丑无比，搜了很多之后知道原来是可以把这个设置成透明的！

不过这样比较麻烦，需要将input标签对应的区域设置成和遮盖它的元素一样大。在栈爆网上看到一个解答太棒了！

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />

<input type="file" id="file1"  name="file1" style="display:none" />


$("#upfile1").click(function () {

     $("#file1").trigger('click');

});

具体的可以把图片改成button什么的，关键是这里的diplay: none;！

给input元素换样式的更多相关文章

  1. 修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标

    一.修改input元素placeholder属性样式 在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholde ...

  2. input[tyle="file"]样式修改及上传文件名显示

    默认的上传样式我们总觉得不太好看,根据需求总想改成和上下结构统一的风格…… 实现方法和思路: 1.在input元素外加a超链接标签 2.给a标签设置按钮样式 3.设置input[type='file' ...

  3. 为什么 input 元素能用 width 属性

    前几天在是写网页的时候发现input可以设置宽高,很疑惑,上网查了之后发现: 简单的认为 input 就是 inline 元素是片面的.元素默认以何种 display 属性值显示出来,这个其实更多的时 ...

  4. 了解HTML表单之input元素的23种type类型

    目录 传统类型 text password file radio checkbox hidden button image reset submit 新增类型 color tel email url ...

  5. jquery给元素添加样式表的方法

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  6. HTML5 改良的 input 元素的种类

    html5中增加改良的input 元素 . 在过去我们制作网页输入框,会用到不少JS验证,如今有了HTML5写这种效果已经没有那么麻烦了,下面我来给大家介绍两种HTML5的input的新增加的类型应用 ...

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

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

  8. HTML（七）HTML 表单(form元素介绍，input元素的常用type类型，input元素的常用属性)

    前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...

  9. JQuery为元素添加样式的实现方法

    由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...

随机推荐

  1. easyui-combobox绑定回车事件相关

    去掉combobox回车内容不匹配清空输入项     问题描述:easyui的combobox插件,输入的内容如果和选项不匹配时,按下回车会导致输入的内容被清空. 解决办法:要解决回车时,combob ...

  2. [Android Pro] 创建快捷方式，删除快捷方式，查询是否存在快捷方式

    1: 创建快捷方式 需要权限: <uses-permission android:name="com.android.launcher.permission.INSTALL_SHORT ...

  3. 二.Consumer、Producer简单例子

    1.先导入jar包,我使用的是maven <dependency> <groupId>com.alibaba.rocketmq</groupId> <arti ...

  4. TCP三次握手连接和TCP四次挥手及大量TIME_WAIT解决方法：

    1.TCP建立连接,三次握手 建立的TCP连接可靠的连接,必须经过三次握手建立连接才能正式通信彼此传输数数据. 客户端请求服务端建立连接 第一次握手:客户给服务发送一个请求报文SYN, 客户端的状态置 ...

  5. delphi 自定义内存管理

    1.主要通过GetMemoryManager来hook原来的内存管理. 2.通过SetMemoryManager来设置你自己的新的内存管理,可以用一个内存池来优化和管理程序的内存调用情况. proce ...

  6. Hive不等值连接

    select * from ( select t1.instalment_id as r_id , t2.instalment_id as p_id from (select instalment_i ...

  7. 转：关于Android机型适配这件小事儿

    http://www.umindex.com/devices/android_resolutions 大家都知道Android机型分裂严重,在开发Android App的时候永远都面临适配N多机型的问 ...

  8. minic 类型声明与变量定义句型处理

    #include "token_define.h" //这个文件是用来处理句型的,对于算术表达式都是放在前面的那个头文件中来处理 typedef struct _handle_tr ...

  9. mysql时间字段转换为毫秒格式

    下面是转载的关于MySQL毫秒.微秒精度时间处理的两段篇章,留给自己和供大家参考~~ 一.MySQL 获得毫秒.微秒及对毫秒.微秒的处理 MySQL 较新的版本中(MySQL 6.0.5),也还没有产 ...

  10. MVC入门教程二[第一个小Demo]（转载）

    本文目标 1.了解"模型"."视图"."控制器"的创建.调试和使用过程. 本文目录 1.创建模型 2.创建视图 3.创建控制器 4.调试 5 ...