浏览器默认的<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. 万里长征第二步——django个人博客（第一步 ——创建主页）

    运行命令行工具,输入:pip install virtualenv  --安装virtualenv库. virtualenv blog_project_venv ——使用virtualenv创建一个虚 ...

  2. 如何查看Oracle日志

    Oracle日志查看 一．Oracle日志的路径: 登录:sqlplus "/as sysdba" 查看路径:SQL> select * from v$logfile; SQ ...

  3. 流畅的python第九章符合Python风格的对象学习记录

    对象表示形式 每门面向对象的语言至少都有一种获取对象的字符串表示形式的标准方式.Python提供了两种方式 repr()便于开发者理解的方式返回对象的字符串表示形式 str()便于用户理解的方式返回对 ...

  4. 使用JEECG过程中的问题汇总（持续更新）

    1.首次启动Tomcat服务时,控制台信息提示请使用SQL Server 2005或更高版本. <dependency> <groupId>org.jeecgframework ...

  5. （转）Vue2.X的路由管理记录之 钩子函数（切割流水线）

    $route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化)它. 导航和钩子函数: 导航:路由正在发生改 ...

  6. 如何在 MyEclipse 下用 Gradle 构建 Web Application

    一.安装 Gradle 插件,参考我的另一篇文章:MyEclipse 集成 Gradle开发环境 二.新建一个 Web Project, 在项目根目录下新建 build.gradle 文件, 并向其中 ...

  7. postgresql 如何导入sql文件

    (1)不能使用pgadmin 执行Copy语句,目前客户端还不支持这种写法. (2)打开sql shell,执行如下操作 \i C:/Users/Peter_Youny/Desktop/ischool ...

  8. rapidxml的常见读写操作

    rapidxml官网地址:http://rapidxml.sourceforge.net/ rapidxml只包含4个hpp头文件,把这四个头文件放到项目中,即可使用rapidxml #include ...

  9. vue - webpack.dev.conf.js for merge

    webpack-merge提供了一个merge连接数组并合并创建新对象的对象的函数.如果遇到函数,它将执行它们,通过算法运行结果,然后再次将返回的值包装在函数中. 这种行为在配置webpack时特别有 ...

  10. Spring中AOP的理解

    1.AOP的概念 AOP(AspectOriented Programming,面向切面编程)指的是可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下个程序动态统一添加功能的一种技术.AOP ...