input file 美化
<input type='file'>的默认外观实在难看,绝大多数情况都需要对其美化。找了很多资料,目前发现以下方式是最简单的美化方式。
1.将file input用label包裹起来,然后给这个label增加我们想要的样式。
2.给input增加样式:
style="left:-9999px;position:absolute;"
3.label内增加显示文本
<span>上传文件</span>
完整代码:(点击查看demo)
<label class="upload_btn" for="file">
<input type="file" id="file" name="" style="left:-9999px;position:absolute;">
<span>上传文件</span>
</label>
这是label标签特性,可将事件传递到目标标签,如不加for属性,默认传递到第一个标签。
input file 美化的更多相关文章
- input file 美化的方法
css input[type=file] 样式美化,input上传按钮美化 2014年8月29日 113210次浏览 由于明天公司组织出去游玩,今天把这两天的博客都写了吧,今天的内容是input[ty ...
- input file美化,文件上传
此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用J ...
- input file美化
<style> a{display:inline-block; width:100px; height:40px; position:relative; overflow:hidden;} ...
- Input file 文本框美化
HTML原生的input file 上传按钮有多(无)不(力)漂(吐)亮(槽)我就不多说了.大家几乎在项目中都会有遇到图片.等文件需要上传的地方,好看的文件上传按钮会使人身心愉悦(我瞎说的).好了不多 ...
- 伪触发 input file 的click事件
前端在做 input file 美化的时候,通常 把 input 定位position 到 已美化的按钮最上方 opacity: 0 HTML5时代,已有更方便的方法,点击美化按钮直接触发选择文件事件 ...
- ie浏览器下HTML上传控件input=file的美化
近期写东西用到了input=file这个按钮,给其添加背景,在其它浏览器上都可以正常的显示,可一到ie上便不听话了,完全没有添加上,显的很难看.今天在网上找到一方法,试过后感觉很好,终于把这个问题给解 ...
- input file 文件上传标签的样式美化
input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...
- input file样式美化
默认样式: <input type="file" /> 美化样式时: 将其设置为透明,设置宽高覆盖到需要用的地方,宽100%,高100% 可以用到定位 .box{ po ...
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
随机推荐
- Spring学习之路-SpringBoot简单入门
简单讲SpringBoot是对spring和springMVC的二次封装和整合,新添加了一些注解和功能,不算是一个新框架. 学习来源是官方文档,虽然很详细,但是太墨迹了… 地址:https://doc ...
- PetaPoco源代码学习--3.Sql类
PetaPoco对数据库的操作直接使用SQL语句,在代码中进行调用既可以直接传递SQL语句,也可以使用提供的SQL类来获取到SQL语句进行操作,直接传递SQL语句在内部实现中也是封装成Sql类传递到底 ...
- [bug]不包含“AsNoTracking”的定义
摘要 在使用ef做查询优化的时候我们会用到AsNoTracking方法,但如果不引入命名空间,你就会出现不包含“AsNoTracking”的定义的错误. 解决办法 引入命名空间:System.Data ...
- 【JVM】3、JVM问题查找
1.查看tomcat进程号 两种方式都可以查看tomcat进程号 ps -ef | grep tomcat-web jps -lmvV |grep tomcat-web 结果如下:2556 2.查看进 ...
- Service 动态更新 UI
http://blog.csdn.net/u013724061/article/details/38642049 最终效果: 动态显示当前时间和电量 思路: 首先在Activity里用内部类定义两种广 ...
- hadoop的namenode故障处理方法
Namenode 故障后,可以采用如下两种方法恢复数据. 方法一:将 SecondaryNameNode 中数据拷贝到 namenode 存储数据的目录: 方法 二: 使用 -importCheckp ...
- Windows平台如何部署scrapy
0.安装Anaconda 这个不教了,自己去Anaconda官网上下个安装包,装上就好. https://www.anaconda.com/distribution/ 1.使用Anaconda创建一个 ...
- Codeforces445B(SummerTrainingDay06-N 并查集)
B. DZY Loves Chemistry time limit per test:1 second memory limit per test:256 megabytes input:standa ...
- python协程的简单了解
协程: 协程,又称微线程,纤程.英文名Coroutine. 可以在不同的函数间切换,而且切换的次数和时间都是由用户自己确定的. 协程的几种实现方式: (1)使用生成器yield实现. 如果不了解生成器 ...
- luogu P4108 [HEOI2015]公约数数列——solution
-by luogu 不会啊.... 然后%了一发题解, 关键是 考虑序列{$a_n$}的前缀gcd序列, 它是单调不升的,且最多只会改变$log_2N$次,因为每变一次至少除2 于是,当我们询问x时: ...