给上传文件的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没有提供 ...
随机推荐
- JavaScript 之 ajax
1. AJAX 的概念 AJAX,即 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML) 同步:前面的代码不执行完毕,后面的代码无法执行 异步: ...
- ES6的新特性（20）—— Module 的加载实现
Module 的加载实现 上一章介绍了模块的语法,本章介绍如何在浏览器和 Node 之中加载 ES6 模块,以及实际开发中经常遇到的一些问题(比如循环加载). 浏览器加载 传统方法 HTML 网页中, ...
- 将Python文件打包为exe文件，并在控制台运行之简易教程
第一步 在线安装 pyinstaller. 方法:打开win+ R,输入cmd,在命令行输入"pip install pyinstaller" 静等几分钟后即可安装成功. ...
- 关于jsp之间href传参（中文）乱码问题
在A.jsp中有href传值 <a href=\"6.jsp?param="+rs.getString(2)+"\">" 在B.jsp中使 ...
- 又要开始新的征程了hhh（这次内容比较感兴趣）
因为做英雄部分,既是我比较感兴趣,又很符合这次c++学习的目的,所以我很开心. 其实从小玩的RPG,即时战略和回合制游戏不算少,对于属性方法其实都算不上陌生.但是还是在网上找了一些学习资源. http ...
- Alpha事后诸葛会议
[设想和目标] Q1:我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? "小葵日记"是为了解决18-30岁年轻用户在记录生活时希望得到一美体验友好 ...
- 周总结<4>
经过了一周的学习,我们在html以及C语言方面又有的新的知识点的学习. html 自习表格,函数等 C语言 哈弗曼编码 Html案例: 一． <!DOCTYPE html PUBLIC &quo ...
- 《我是一只IT小小鸟》心得
虽然读这本书是老师布置的作业,但是读了几页后就被书中的内容所吸引住了.或许是因为我也是学这个专业的,所以书中的一些内容让我觉得非常的有兴趣.作为一个学习软件工程的大一学生还没真正的认识到这个专业的深奥 ...
- lintcode-445-余弦相似度
445-余弦相似度 Cosine similarity is a measure of similarity between two vectors of an inner product space ...
- nginx 配置文件简介
主配置文件说明(先将注释部分去掉:sed -ri ‘/^#|[[:space:]]+#/d’ /etc/nginx/nginx.conf) (1)全局配置段 1:指明运行worker进程的用户和组 u ...