<!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. iptables-1基本知识和工作原理

    一.简介1.iptables的定义:防火墙分为硬件防火墙和软件防火墙.iptables是软件防火墙,工作在OSI的第三.四层,是从操作系统层面对网络流量进行监控和防护.延伸:(1)Linux系统内核集 ...

  2. Linux正则表达式,grep总结,sed用法

    原文: 1.sed   流编辑器,实现对文字的增删改替换查(过滤.取行),能同时处理多个文件多行的内容,可以不对原文件改动,把整个文件 输入到屏幕,可以把只匹配到模式的内容输入到屏幕上.还可以对原文件 ...

  3. （Linux基础学习）第四章：Linux系统中的日期和时间介绍和ntpdate命令

    第1节:日期和时间1.Linux的两种时钟:系统时钟:由Linux内核通过CPU的工作频率进行的硬件时钟:主板2.相关命令date 显示和设置系统时间hwclock,clock 显示硬件时钟-s,-- ...

  4. C++（三十七） — 字符串的函数重载—案例

    1.MyString.h 头文件 #pragma once #include <iostream> using namespace std; class MyString { public ...

  5. Java精通并发-notify方法详解及线程获取锁的方式分析

    wait(): 在上一次https://www.cnblogs.com/webor2006/p/11404521.html中对于无参数的wait()方法的javadoc进行了解读,而它是调用了一个参数 ...

  6. Oracle SQL developer客户端 如何连接已经安装完毕的Oracle服务器端

    对于刚刚安装完毕Oracle数据库后不知道如何链接使用,可参考以下解决方案. Part 1 首先说服务: 如果正确安装Oracle 11g客户端的朋友们注意了,想要Oracle数据库正常启动有如下三个 ...

  7. FRCN文本检测（转）

    [源码分析]Text-Detection-with-FRCN 原创 2017年11月21日 17:58:39 标签: 659 编辑 删除 Text-Detection-with-FRCN项目是基于py ...

  8. nodejs查看本机hosts文件域名对应ip

    const dns = require('dns') dns.lookup('domainName', function(err, result) { console.log(result) }) r ...

  9. 语法速学，返回数组 repeated修饰符

    重新编写proto文件 syntax = "proto3"; package services; import "google/api/annotations.proto ...

  10. 使用状态文件+vigil 监控系统状态

    vigil 是一个不错的系统可用性报告系统,具有还不错的ui 界面,同时也有通知配置,以下是一个简单的 demo 使用状态文件,以及http body 匹配的模式进行web 应用状态的监控,只是简单的 ...