给上传文件的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没有提供 ...
随机推荐
- 华为中兴借eBay出海 靠零售渠道撬动市场
在跨境电商领域,大多数中国商家依靠“中国制造”的优势和价格战策略打拼出一条血路,在海外市场占领了自己的一席 之地.不过,山寨货纷纷出海的同时,中国本土的品牌商们也开始了探索海外市场之旅.目前,华为.中 ...
- HTML5+Bootstrap 学习笔记 3
HTML5 aria-* and role aria是指Accessible Rich Internet Application.role的作用是描述一个非标准的tag的实际作用,而aria-*的作用 ...
- DoItYourself！
在杨老师的勉励下,我准备开始“自己”写程序.速度很慢,不过在写的过程中对于用到的几个函数更加熟悉.也尝试多学一点,学透一点.遇到不会的函数,语法不清楚的,还是会百度,不过会自己再敲一遍.重复下去. 下 ...
- 冲刺阶段站立会议每日任务i4
昨天对小组成员的任务进行了进一步细化分配,今天了解了安卓开发环境的相关知识. 遇到的问题: 没有遇到问题.
- 免费各种查询API接口
快递查询 http://www.kuaidi100.com/query?type=quanfengkuaidi&postid=390011492112 (PS:快递公司编码:申通"s ...
- 微信小程序组件 自定义单选
<view class='userperson'> <view class='f30 flexca'>请选择您的注册身份</view> <view class ...
- smokping的部署使用
本文是介绍如何的使用smokeping来监控idc机房的网络质量情况,从监控图上的延时与丢包能分辨出你机房的网络是否稳定,是否为多线,是否为BGP机房,到各城市的3个运行商网络各是什么情况,如果出现问 ...
- Android 混淆签名打包
1.混淆文件 proguard-rules.pro # Add project specific ProGuard rules here. # By default, the flags in thi ...
- 【bzoj3130】[Sdoi2013]费用流 二分+网络流最大流
题目描述 Alice和Bob做游戏,给出一张有向图表示运输网络,Alice先给Bob一种最大流方案,然后Bob在所有边上分配总和等于P的非负费用.Alice希望总费用尽量小,而Bob希望总费用尽量大. ...
- [APIO2014]回文串 manacher 后缀数组
题面:洛谷 题解: 还是这个性质:对于每个串而言,本质不同的回文串最多只有O(n)个. 所以我们先求出这O(n)个本质不同的回文串,然后对整个串求一次sa. 然后对于每个回文串,求出它的出现次数,更新 ...