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 ...
随机推荐
- ios CoreData NSManagedObject 生命周期
用同样的检索条件从context检索出的对象是一个????所以 在主页的3个brand没法释放,在仅仅处理brand的时候???? 和 多个 context无关 我重写了NSManagedObject ...
- ios 单一线程中的Runloop机制会导致线程安全问题吗？
今天在处理多线程突然想到一个问题,多核处理器会不会导致,单一线程中,由runloop分发的2个函数同时执行呢?进而同时修改同一个变量,产生bug? 我做了以下的测试: - (void)viewDidL ...
- 压测 apache ab 初探
2015年10月30日 14:58:34 ab是apache自带的压测命令, 在其bin目录下边, 不仅可以压测Apache, 也可以测nginx或其他服务器 可以模拟上传post值 (-p, 与下边 ...
- Java for LeetCode 224 Basic Calculator
Implement a basic calculator to evaluate a simple expression string. The expression string may conta ...
- 用基础动画实现iOS控件循环旋转
- (void)viewDidLoad { [super viewDidLoad]; UIButton* ag=[[UIButton alloc]initWithFrame:CGRectMake(sc ...
- 关于java中Double类型的运算精度问题
标题 在Java中实现浮点数的精确计算 AYellow(原作) 修改 关键字 Java 浮点数 精确计算 问题的提出:如果我们编译运行下面这个程序会看到什么?publi ...
- 自定义循环滑动的viewpager
今天和大家分享一下如何定制一个可以循环滑动的viewpager.其实今天更重要的提供一种组件化思想,当然你可以理解为面向对象思想. 吐槽一下网上流行的实现方式吧(为了方便说明,下文称之为方式A),方式 ...
- 【leetcode】Minimum Path Sum(easy)
Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...
- 20145213《Java程序设计》第七周学习总结
20145213<Java程序设计>第七周学习总结 教材学习内容总结 周末快乐的时间总是短暂的,还没好好感受就到了要写博客的周日.有人喟叹时间都去哪儿了,那本周我们就来认识一下Java里的 ...
- 解决Windows10下80端口被PID为4的System占用的问题
一.背景 最近由于好奇心,更新了windows10系统,感觉上手还蛮快,而且体验还不错,但是在IDEA中做开发时,使用80端口进行启动项目的时候发现端口被占用了,于是尝试解决这个问题.具体步骤如下,分 ...