浏览器默认的<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. Jquery JS 正确的比较两个数字大小的方法

    if(2 > 10){ alert("不正确!");} 此比较不会是想要的结果:它相当于2 >1,把10的第一位取出来比较. 解决方 法:  if(eval(2) &g ...

  2. --secure-file-priv option so it cannot execute this statement

    MYSQL导入数据出现The MySQL server is running with the --secure-file-priv option so it cannot execute this ...

  3. #!/usr/bin/env在脚本中的作用

    在linux的一些脚本,需在开头一行指定脚本的解释程序,如: #!/usr/bin/env bash #!/usr/bin/bash #!/usr/bin/env python  告诉操作系统执行这个 ...

  4. Log4net的一点改进

    昨天把log4net更新了一下,发现从NUGET上安装log4net后,使用方式简化了许多.以前我在文章<log4net使用简介>中介绍过,使用log4net需要有两步前期准备工作: 在使 ...

  5. .NET dnSpy 程序集编辑器，反编译器和调试器

    https://github.com/0xd4d/dnSpy https://github.com/0xd4d/dnSpy/releases/ dnSpy是反向工程.NET程序集的工具.它包括一个反编 ...

  6. 使用JTextArea示例

    相对于JLabel显示提示文字,JTextArea有一个先天优势:文字可以拷贝出来.经过下面设置它也能在外观上和JLabel一致. 代码如下: JTextArea txtArea=new JTextA ...

  7. 浅记初次使用expect、scp中出现的一些小问题

    以前也学过一些shell,不过学得并不是很深入,动手写的代码的时间也不是很多.前不久将shell比较细的过了一遍,leader布置了任务让用shell写一个脚本将redis源码压缩包从一个服务器上传到 ...

  8. Discuz常见小问题2-如何在数据库搜索指定关键字

    点击搜索,然后输入关键字,注意要全选或者部分选择表(一个数据库的表),点击右下角的执行   会提示有多少个匹配,可以在浏览器中直接搜索"1个匹配"来定位到哪个数据表找到了匹配项,然 ...

  9. J2EE环境搭建（三）配置Tomcat 7.0的局部数据源

    在J2EE环境搭建(一)中遗留下一个配置Tomcat数据源的问题,最近都在专心搞iOS的东西,由于J2EE布置了作业,所以又回过头来搞下J2EE.汗... 在这里我使用的是MySQL. 1.配置MyS ...

  10. iOS 判断NSString是否包含某个字符串

    主要是使用3个方法 rangeOfString    是否包含 hasPrefix      是否在前缀包含 hasSuffix           是否在末尾包含 如代码: //判断字符是否包含某字 ...