给上传文件的input控件“美容”
在工作中经常会遇到form表单这种东西。然而表单的其他input控件样式还是很好改变的。但是，唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮。
demo:
html代码
<body>
<form action="" method="post" enctype="multipart/form-data">
<a href="#" class="a-upload">
<input type="file" name="file" id="file">点击这里上传图片</a>
</form>
</body>
css代码
<style>
.a-upload {
padding: 4px 10px;
width: 200px;
height: 30px;
box-sizing: border-box;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1;
top: 5px;
} .a-upload input {
position: absolute;
font-size: 100px;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
width: 200px;
height: 30px;
left: 0;
top: 0;
} .a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
</style>
给上传文件的input控件“美容”的更多相关文章
- 给上传文件的input控件"美容"
作为一名前端程序猿呢,在工作中经常会遇到form表单这种东西.然而表单的其他input控件样式还是很好改变的.但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮.刚好菜鸟我最近工 ...
- JS ajaxfileUpload 一次性上传多个input控件 上传多个文件
本方法适用于一次性上传多个input框输入的文件,如下图所示,任务是需要一次上传两个input框提供的两个文件. 具体方法: 1.修改ajax调用方法 如上图所示,只需要将ajaxFileUpload ...
- yii上传图片、yii上传文件、yii控件activeFileField使用
yii框架提供了activeFileField控件来完成上传文件(当然也包括了上传图片)的操作,下面介绍yii的activeFileField使用方法.1.函数原型:public static str ...
- 上传文件 隐藏input type="file",用text显示
<div> <span>上传文件:</span> <input type="file" id="upload_file" ...
- FormData上传文件（input file）
<div> <input type="file" name="FileUpload" id="FileUpload" va ...
- Ajax 上传文件（input file FormData）
FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用. jQuery Aj ...
- 上传文件的input问题以及FormData特性
1.input中除了type="file"还要加上name="file",否则$_FILES为空,input的name值就是为了区分每一个input的 2.va ...
- 《手把手教你》系列技巧篇（五十四）-java+ selenium自动化测试-上传文件-中篇（详细教程）
1.简介 在实际工作中,我们进行web自动化的时候,文件上传是很常见的操作,例如上传用户头像,上传身份证信息等.所以宏哥打算按上传文件的分类对其进行一下讲解和分享. 2.为什么selenium没有提供 ...
- 《手把手教你》系列技巧篇（五十三）-java+ selenium自动化测试-上传文件-上篇（详细教程）
1.简介 在实际工作中,我们进行web自动化的时候,文件上传是很常见的操作,例如上传用户头像,上传身份证信息等.所以宏哥打算按上传文件的分类对其进行一下讲解和分享. 2.为什么selenium没有提供 ...
随机推荐
- [T-ARA/筷子兄弟][Little Apple]
歌词来源:http://music.163.com/#/song?id=29753511 作曲 : 筷子兄弟 [作曲 : 筷子兄弟] 作词 : K-Smith [作词 : KSmith] 编曲 : 新 ...
- 软工实践-Alpha 冲刺 （8/10）
队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 已经解决登录注册等基本功能的界面. 完成非功能的主界面制作 ...
- （打补丁 ）patch
前言: diff:逐行比较文件的不同,并且显示出来. patch: 打补丁工具,将补丁打到老文件里面,也就是diff左边的那个文件,使得老文件和新文件一样 格式:diff [选项] 老文件 新文件 格 ...
- 学生导师互选系统(php代码规范)
学生导师互选系统(php代码规范) php编码规范 组名:一不小心就火了 负责项目:学生导师互选系统(安卓端) 编写目的 为了更好的提高团队的的合作效率,保证开发的有效性和合理性,并可最大程度的提高程 ...
- 3dContactPointAnnotationTool开发日志（二九）
今天想着在Windows平台上跑通那个代码,不过它的官网上写的支持平台不包括windows,但我还是想试试,因为看他的依赖好像和平台的关系不是特别大. 看了下它的py代码,不知道是py2还是p ...
- 【acm】杀人游戏（hdu2211）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2211 杀人游戏 Time Limit: 3000/1000 MS (Java/Others) M ...
- 微信Web开发者工具-下载、安装和使用图解
开发和测试小程序,需要借助微信官方提供的微信Web开发者工具进行预览和调试代码,从下载安装到使用,大致的流程如下: 1.下载安装包 下载地址传送门:https://developers.weixin. ...
- HostsConfig文件修改器
Hosts文件修改器 HostsConfig v1.1 免费版 最近工作需要,经常需要更换各种域名的内外网配置,频繁的修改HOSTS文件,很多的时间都用在的修改HOSTS文件上,工作效率大大降低,课余 ...
- VisualStudio2013 代码查看优化 对齐线
http://jingyan.baidu.com/article/363872eccef5276e4ba16f91.html
- 内存测试——Android Studio中对应进程的Heap
通过Android Studio的Heap查看该程序的目前占用内存大小,多次进出界面,观察内存内存大小的变化.用Heap监测应用进程使用内存情况的步骤如下: 1. 启动Android Studio—& ...