input标签type="file"上传文件的css样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/*样式1*/
.a-upload {
padding: 4px 10px;
height: 20px;
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
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
/*样式2*/
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
</style>
</head>
<body style="padding: 10px">
<a href="javascript:;" class="a-upload">
<input type="file" name="" id="">点击这里上传文件
</a>
<a href="javascript:;" class="file">选择文件
<input type="file" name="" id="">
</a>
</body>
</html>
input标签type="file"上传文件的css样式的更多相关文章
- input type=file 上传文件样式美化(转载)
input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...
- input type file上传文件之后清空内容。
上次写过如何上传文件,上传成功之后,会出现一些问题. 当我打开上传的文件,但是没有点击上传,然后关闭弹窗,接着继续上传刚才的那个文件.为了满足产品组的要求,我们一般都会把样式进行一定的覆盖. 但这就会 ...
- jquery判断 input type="file"上传文件是否为空
要想获取type="file"的input内容,用var file = $("id").val();肯定是不行的,下面是代码: html上传按钮为: <i ...
- input type='file' 上传文件 判断图片的大小是否合格与witdh 和 height 是否合格
function CheckFiles(obj) { var array = new Array('gif', 'jpeg', 'png', 'jpg'); //可以上传的文件类型 if (obj.v ...
- input type='file'上传控件假样式
采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
- 自定义type='file'上传文件样式
改变默认的上传文件样式: 用label作为替代 <input id="file_-1" type="file" name="file" ...
- HTML <input type="file">上传文件——结合asp.net的一个文件上传示例
HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...
- <input type="file">上传文件并添加路径到数据库
注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...
- ASP------<input type="file"/>上传文件
界面代码(注意:runat="Server"和input file中name一定要有) <html xmlns="http://www.w3.org/1999/xh ...
随机推荐
- Sql 按日期带条件统计
select convert(char(8),[UseTime],112) dt,sum([UseMoney]) 合计,sum(case when [S_Number]=2 then UseMoney ...
- 1-Spark-1-性能调优-数据倾斜1-特征/常见原因/后果/常见调优方案
数据倾斜特征:个别Task处理大部分数据 后果:1.OOM;2.速度变慢,甚至变得慢的不可接受 常见原因: 数据倾斜的定位: 1.WebUI(查看Task运行的数据量的大小). 2.Log,查看log ...
- 小程序canvas绘制倒计时
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 效果展示: //广告倒计时 advTimeCountDown:function(advTime ...
- Crypto模块中的签名算法
因为支付宝当中需要自行实现签名,所以就用到了SHA265和RSA2,将拼接好的信息用私钥进行签名,并进行Base64编码,然后解密就用支付宝回传给用户的公钥解密就ok了,所以我就使用Crypto模块, ...
- VLAN实验3:理解Hybrid接口的应用
实验环境 实验拓扑图 实验编址 实验步骤1.基本配置按照实验编址为PC配置IP地址,以PC5为例 在PC5与PC1通过ping命令测试,发现通讯正常.(以此为例,其他的我就不一一截图测试了.) 在S1 ...
- Python入门篇-封装与解构和高级数据类型集合(set)和字典(dict)
Python入门篇-封装与解构和高级数据类型集合(set)和字典(dict) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.封装和结构 #!/usr/bin/env pytho ...
- 使用virtualbox安装unbuntu开启共享文件夹时遇到的权限问题
在安装完虚拟机之后,开启文件夹共享,发现只能用root进行访问,个人帐号无权限: cust@hqjia-desktop:/media$ ll drwxr-xr-x 4 root root 4096 2 ...
- 使用Arduino开发板制作交流电压表
在本文中,我们将使用Arduino开发板制作一个交流电压测量装置,测量我们家中交流电源的电压.我们将在Arduino IDE的串行监视器上打印输出该电压,并在万用表上显示出来. 制作数字电压表比模拟电 ...
- 版本控制Git研究二
经过好几周的工作忙碌,终于可以有时间静下心来学习东西了,做为崇尚技术的人来说,应该是最幸福的时光了,呵呵,当然也是宅神的表现啦,话不多说,继续git的学习,上次已经对git的一些概念进行了说明,具体可 ...
- :Spring-06 -AOP [面向切面编程] -配置异常通知的两种方式--AspectJ 方式 -Schema-based 方式
三.配置异常通知的步骤(AspectJ 方式) 1.只有当切点报异常才能触发异常通知 2.在spring 中有AspectJ 方式提供了异常通知的办法 3.实现步骤: 3.1新建类,在类写任意名称的方 ...