浏览器默认的<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. ElasticSearch调优问题

    1. 近期遇到一个ES内存居高不下的问题,查了查,发现ES有个fielddata,当你发起一个查询,分析字符串的聚合将会被加载到 fielddata,如果这些字符串之前没有被加载过.如果结果中 fie ...

  2. LINUX之文件操作权限讲解

    r(Read,读取):对文件而言,具有读取文件内容的权限:对目录来说,具有浏览目 录的权限. w(Write,写入):对文件而言,具有新增.修改文件内容的权限:对目录来说,具有删除.移动目录内文件的权 ...

  3. transport.js报hasOwnProperty对象不支持此属性

    ECShop transport.js错误 这次出现的问题是transport.js在IE下提示对象不支持该用法.出现错误位置为608行的下面的代码: if(this.hasOwnProperty(k ...

  4. jsp页面数据回显(select下拉选择框)

    1.静态变量方式: <!-- 实现select标签回显 --> 1.<select name="curStatus" value="${curStatu ...

  5. 十分钟使用ionic Framework开发一个跨平台移动应用

    Ionic是一个前端的框架,帮助开发人员使用HTML5, CSS3和JavaScript做出原生应用. ionic的理念类似前端开发的BootStrap,目标是封装HTML5移动跨平台开发的最佳实践. ...

  6. 学习EF之CodeFirst一

    最近将花点时间学习EF相关知识,通过文章来进行一个完整的学习,Code First是由先有代码后生成数据库:将通过一实例来进行学习:我们简单分为三层,其中DataLibrary为EF上下文处理层,Mo ...

  7. hp-ux 集群,内存 小记

    -----查看hp 集群状态信息 # cmviewcl -v CLUSTER        STATUS       dbsvr          up               NODE      ...

  8. 【Python 数据分析】从Mysql数据库取出数据作图分析

    在之前的文章中[爬取天气信息]我们已经将昆明二月份的气温爬取到数据库了,那么现在我们需要对这些数据进行一些分析操作,下面是使用matplotlib对这些数据的一些操作 折线图 首先我们读取数据库中的数 ...

  9. struts 页面调用Action的指定方法并传递参数

    如果为action配置了类,那么默认就会执行Action类的excute方法,Action类的写法三种: ① public class Action1 { public String execute( ...

  10. Backbone.js 1.0.0源码架构分析(一)

    Backbone.js 是javascript 语言中 首个实现MVC设计模式的类库,API接口方法重度依赖于underscore.js,DOM选择器则依赖于jQuery.js或者zepto.js. ...