input按钮上传按钮样式
主要是定位和不透明度来实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*a upload */
.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
} .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>
<a href="javascript:;" class="a-upload">
<input type="file" name="">点击这里上传文件
</a> <a href="javascript:;" class="file">选择文件
<input type="file" name="">
</a>
</body>
</html>
input按钮上传按钮样式的更多相关文章
- input美化上传按钮美化
今天工作需求碰到 样式改变上传按钮 效果: <a href="javascript:;" class="a-upload"> <input t ...
- 读取本地文件理解FileReader对象的方法和事件以及上传按钮的美化。
一.FileReader对象 用来把文件读入内存,并且读取文件中的数据.FileReader对象提供了异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 浏览器支持情况, ...
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- css input[type=file] 样式美化，input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
- 上传按钮样式优化 <input type="file" />
<html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { ...
- input上传按钮美化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 兼容IE8的flash上传框架"uploadify"自定义上传按钮样式的办法
(uploadify版本:3.2.1 ) 因为公司业务的原因,所做的项目需要兼容IE8,因此做的上传插件无奈选择的是基于flash的uploadify. 由于是基于flash的,所以使用过程中,难以给 ...
- 一个漂亮的上传按钮input[type=file]
;;} <div class="input-group xj-file xj-panel-top"> <span class="input-group- ...
- CSS自定义文件上传按钮样式，兼容主流浏览器
解决办法:使用text文本框及a链接模拟文件上传按钮,并且把文件上传按钮放在他们上面,并且文件上传按钮显示透明.1.图片2. [代码][HTML]代码 <div class="b ...
随机推荐
- git命令使用
2015-07-15 11:59:11 git pull : 相当于 SVN up git status : 相当于 SVN st git add a.txt: 新添加文件 或者 将文件修改保存到索引 ...
- perl q qq qr qw qx 区别与使用方法
1.q 相当于 单引号' ' 转义字符无效 q可以使用()[] {} // ,, 2.qq 相当于" " 转义字符有效 qq可以使用()[] {} // ,, 3.qw 相当于 ...
- java Thread和Runnable区别
①Thread类实现了Runnable接口,主要构造方法为Thread(Runnable target).Thread(Runnable target,String name).Thread(Stri ...
- C#获取IP和主机名
System.Net.IPAddress addr; //获取IP addr = new System.Net.IPAddress ( Dns.GetHostByName ( Dns.GetHostN ...
- nyoj925_国王的烦恼_并查集
国王的烦恼 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 C国由n个小岛组成,为了方便小岛之间联络,C国在小岛间建立了m座大桥,每座大桥连接两座小岛.两个小岛间可能 ...
- 使用iScroll时，input等不能输入内容的解决方法（share）
最近做移动平台的应用,使用iscroll使屏幕上下滑动.发现当使用iscroll后,input等不能输入内容了.只要在iscroll.js文件中加入如下代码就ok了. function allowFo ...
- cordova android platform cordova build 遇到的问题
版权声明:本文为博主原创文章,未经博主允许不得转载. 一.下载gradle-2.2.1-all.zip不成功,一直在下载,卡在这个downloading http://services.gradle. ...
- 【编程题目】输入一个单向链表，输出该链表中倒数第 k 个结点
第 13 题(链表):题目:输入一个单向链表,输出该链表中倒数第 k 个结点.链表的倒数第 0 个结点为链表的尾指针.链表结点定义如下: struct ListNode {int m_nKey;Lis ...
- HTML简历表格
效果图 <!DOCTYPE > <html> <head> <meta charset="utf-8" /> </head&g ...
- windows一个目录下最大文件数目
对于FAT16文件系统, 可以保存的文件体积最大值是 4 GB - 1 byte (2^32 bytes - 1 byte): 卷的最大体积是4GB:每个卷上最多可以保存的文件数量是65,536个 ( ...