<!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样式的更多相关文章

  1. input type=file 上传文件样式美化（转载）

    input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...

  2. input type file上传文件之后清空内容。

    上次写过如何上传文件,上传成功之后,会出现一些问题. 当我打开上传的文件,但是没有点击上传,然后关闭弹窗,接着继续上传刚才的那个文件.为了满足产品组的要求,我们一般都会把样式进行一定的覆盖. 但这就会 ...

  3. jquery判断 input type="file"上传文件是否为空

    要想获取type="file"的input内容,用var file = $("id").val();肯定是不行的,下面是代码: html上传按钮为: <i ...

  4. input type='file' 上传文件 判断图片的大小是否合格与witdh 和 height 是否合格

    function CheckFiles(obj) { var array = new Array('gif', 'jpeg', 'png', 'jpg'); //可以上传的文件类型 if (obj.v ...

  5. input type='file'上传控件假样式

    采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  6. 自定义type='file'上传文件样式

    改变默认的上传文件样式: 用label作为替代 <input id="file_-1" type="file" name="file" ...

  7. HTML <input type="file">上传文件——结合asp.net的一个文件上传示例

    HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...

  8. <input type="file">上传文件并添加路径到数据库

    注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...

  9. ASP------<input type="file"/>上传文件

    界面代码(注意:runat="Server"和input file中name一定要有) <html xmlns="http://www.w3.org/1999/xh ...

随机推荐

  1. mysql审计插件-记录所有sql语句

    https://www.58jb.com/html/160.html https://www.jianshu.com/p/a0e0aec3cb6f MySQL审计工具Audit Plugin安装使用 ...

  2. python代码工具小结

    目录: 1.with读.写文件 (1)with读文件 (2)with写文件 2.requests爬虫 (1)get请求 (2)post请求 1.with读.写文件 (1)with读文件 (2)with ...

  3. Find 命令记录

    当需要查找一个时间的文件时 使用find [文件目录] -mtime [时间] 例如:查看mysql.bak目录下的1天前的文件 find mysql.bak -mtime 找到此文件之后需要将它移动 ...

  4. Android笔记（四十六） Android中的数据存储——XML（二）PULL解析

    PULL 的工作原理: XML pull提供了开始元素和结束元素.当某个元素开始时,可以调用parser．nextText()从XML文档中提取所有字符数据.当解析到一个文档结束时,自动生成EndDo ...

  5. pycharm社区版对于django项目的创建

    学习django的基础的东西:python基础(虽然自己看了一遍,不过还有好多东西都是一知半解的,所以还要重复看,去加强自己的基础). 数据库SQL(自己也是对一些基础语句运用的不熟练,然后接下来的主 ...

  6. uwsgi配置文件示例

    uwsgi配置文件参考 相关路径请根据自己项目的实际路径配置 在进行Nginx+uwsgi部署Django项目的时候,需要Nginx的配置中包含uwsgi的配置项,具体请查看另一篇:Nginx配置文件 ...

  7. 大数据技术之Hadoop3.1.2版本完全分布式部署

    大数据技术之Hadoop3.1.2版本完全分布式部署 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.主机环境准备 1>.操作系统环境 [root@node101.yinz ...

  8. Jmeter 中正则表达式提取器Regular Expression Extractor

    正则表达式提取器点击后置处理器中Post Processors 中的正则表达式提取器 Regular Expression Extractor Appy to: 表示作用于哪一个请求Main samp ...

  9. Flink Streaming基于滚动窗口的事件时间分析

    使用flink-1.9.0进行的测试,在不同的并行度下,Flink对事件时间的处理逻辑不同.包括1.1在并行度为1的本地模式分析和1.2在多并行度的本地模式分析两部分.通过理论结合源码进行验证,得到具 ...

  10. 手把手教用C#编写Windows服务 并控制服务 安装、启动、停止、卸载

    Windows服务 Microsoft Windows 服务(即,以前的 NT 服务)使您能够创建在它们自己的 Windows 会话中可长时间运行的可执行应用程序.这些服务可以在计算机启动时自动启动, ...