给input元素换样式
浏览器默认的<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元素换样式的更多相关文章
- 修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标
一.修改input元素placeholder属性样式 在做项目的时候,一般表单元素的placeholder属性样式都是使用浏览器默认的,但有时候为了追求设计上的美感需要修表单元素的placeholde ...
- input[tyle="file"]样式修改及上传文件名显示
默认的上传样式我们总觉得不太好看,根据需求总想改成和上下结构统一的风格…… 实现方法和思路: 1.在input元素外加a超链接标签 2.给a标签设置按钮样式 3.设置input[type='file' ...
- 为什么 input 元素能用 width 属性
前几天在是写网页的时候发现input可以设置宽高,很疑惑,上网查了之后发现: 简单的认为 input 就是 inline 元素是片面的.元素默认以何种 display 属性值显示出来,这个其实更多的时 ...
- 了解HTML表单之input元素的23种type类型
目录 传统类型 text password file radio checkbox hidden button image reset submit 新增类型 color tel email url ...
- jquery给元素添加样式表的方法
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- HTML5 改良的 input 元素的种类
html5中增加改良的input 元素 . 在过去我们制作网页输入框,会用到不少JS验证,如今有了HTML5写这种效果已经没有那么麻烦了,下面我来给大家介绍两种HTML5的input的新增加的类型应用 ...
- input[type='file']样式美化及实现图片预览
前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...
- HTML(七)HTML 表单(form元素介绍,input元素的常用type类型,input元素的常用属性)
前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...
- JQuery为元素添加样式的实现方法
由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...
随机推荐
- hue启用ldap
[desktop] [[auth]] …… …… backend=desktop.auth.backend.LdapBackend .….. http://gethue.com/ldap-or-pam ...
- 再说rocketmq消息存储
两篇精彩的文章: <RocketMQ源码 — 三. Producer消息发送过程> <RocketMQ源码解析:Message存储> rocketmq通过netty获取到消息请 ...
- mac软件下载
mac软件下载 http://www.pc6.com/mac/ https://www.macx.cn/
- (六)SSO之CAS框架扩展 改动CAS源代码实现与ESS动态password验证对接
题记: 偶尔的偶尔我们会听到这个站点的数据泄露了,那个站点的用户数据泄露了.让用户又一次改动登录password,所以,对于用户数据安全性越发的引起我们的重视了,尤其是一些保密性要求高的站点.更须要添 ...
- Codeforces 112A-Petya and Strings(实现)
A. Petya and Strings time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- Deferred content load was not performed. To provide the content, subscribe to the View's QueryControl event
{"Deferred content load was not performed. To provide the content, subscribe to the View's Quer ...
- 近期写的一个控件——Well Swipe beta 1.0
原文地址:http://blog.csdn.net/u013045971/article/details/51119507 近期花了大概一个半月的业余时间写的.从没有到有,中间也碰到了非常多的坑,一点 ...
- 【一步一步走(1)】远程桌面软件VNC的安装与配置
近期在VPS上搭建Python Web环境.走了非常多弯路,借此记下. 先说说购买的VPS(PhotonVPS),我可不是打广告.仅仅是感觉这个VPS服务提供商还不错推荐给你大家,我之前也是体验过阿里 ...
- 运用Unity实现AOP拦截器[结合异常记录实例]
本篇文章将通过Unity实现Aop异常记录功能:有关Unity依赖注入可以看前两篇文章: 1:运用Unity实现依赖注入[结合简单三层实例] 2:运用Unity实现依赖注入[有参构造注入] 另早期 ...
- Openerp开发进销存系统总结
转自 :http://blog.sina.com.cn/s/blog_7cb52fa80101ngt8.html 差不多用了2个星期的闲余事件,对于openerp v7.0进行了学习和应用开发.细节总 ...