浏览器默认的<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. iOS:UIResponser控件的介绍(响应者)

    UIResponser响应者控件   知识: 在iOS中不是任何对象都能处理事件,只有继承了UIResponser的对象才能接收并处理事件.我们称之为“响应者对象” UIApplication,UIV ...

  2. Delphi 对象模型学习笔记(转)

    摘要     Borland Object Pascal 对象模型(现在已经正是命名为 Delphi 语言)与其他 OOP 语言一样,都提供了一些基础服务: 如对象创建服务.对象释放服务.对象识别服务 ...

  3. Vue使用中遇到问题汇总(二)

    1.vue cli使用npm run dev报错cannot get / config/index.js里有两个环境:一个是build,一个dev. 在config/index.js里面修改,buil ...

  4. 【Django】依赖auth.user的数据库迁移,以及admin用户非交互式创建

    admin用户非交互式创建: echo "from django.contrib.auth.models import User; User.objects.create_superuser ...

  5. 北邮连接bupt-mobile

    内容源自:[伪攻略]电脑(win10)连接BUPT-mobile教程 1.控制面板:控制面板\网络和 Internet\网络连接 右键——属性,记住网络配置器的名字(划线部分) 点击配置——高级——网 ...

  6. git使用中的一些问题

    ubuntu14.04中从服务器下代码出错如下: yingc@yingc:/media/sf_yingc/work/gitcode/androidtv$ repo sync boxThe authen ...

  7. java中,重构、重载、重写

    1.什么叫重构? 答:重构(Refactoring)就是通过调整程序代码改善软件的质量.性能,使其程序的设计模式和架构更趋合理,提高软件的扩展性和维护性,系统发展到一定阶段后,使用重构的方式,不改变系 ...

  8. JDBC2.0操作:结果集,更新,插入,删除,批处理语句

    JDBC对ResultSet的支持 JDBC最重要的概念是批处理,可以一次完成多个语句的执行. 可滚动的结果集. 如果想创建可滚动的结果集,则在创建PrepareStatement时候必须指定创建的类 ...

  9. Hibernate 第一个体验程序

    首先要导入包,将下载的hibernate所有required包导入,将下载的hibernate用来写log的slf4j的api和nopjar包导入,将下载的mysql链接引擎jar包导入. 然后新建j ...

  10. LoadRunner参数化时的各个选项说明

    LoadRunner参数化时的各个选项说明 分类: LoadRunner 2009-03-27 09:32 6294人阅读 评论(1) 收藏 举报 loadrunnerrandomgeneratore ...