input type=file美化
最近碰到input type=file 之前用模拟点击来实现美化，发现在IE7下会有bug导致图片上传不上去，最后改用直接美化的方法
<!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="" id="">点击这里上传文件
</a> <a href="javascript:;" class="file">选择文件
<input type="file" name="" id="">
</a>
</body>
</html>
非原创，网络收集得到。
input type=file美化的更多相关文章
- css input[type=file] 样式美化，input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
- input[type='file']样式美化及实现图片预览
前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...
- input[type=file]的美化
__ 一般的选择框在美化过程中会出现各种问题,样式出错,文字无法更改等... 所有随之而生的便是这样的一种修饰方式:[将type=file的input与另一个按钮通过js绑定,这样便可以通过改变另一个 ...
- input type=file 上传文件样式美化（转载）
input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...
- html input[type=file] css样式美化【转藏】
相信做前端的都知道了,input[type=file]和其他输入标签不一样,它的事件必须是在触发自身元素上,而不能是其他元素.所以不能简单的把input隐藏,放个button上去. <a hre ...
- 文件上传input type="file"样式美化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】
首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件< ...
- input[type=file] 样式美化，input上传按钮美化
<style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...
- 【原创】js中input type=file的一些问题
1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...
随机推荐
- Ubuntu终端Terminal常用快捷键
快捷键 功能 Tab 自动补全 Ctrl+a 光标移动到开始位置 Ctrl+e 光标移动到最末尾 Ctrl+k 删除此处至末尾的所有内容 Ctrl+u 删除此处至开始的所有内容 Ctrl+d 删除当前 ...
- homework 11 2016 5 13 读入文件做输入
#include <iostream>#include <fstream> using namespace std; int main(){ string x, y, z; c ...
- IntelliJIDEA 14创建Maven管理的Java Web项目
1.新建项目,选择Maven,点击Next继续. 接着输入项目名 接着直接点击Finish即可 下图就是创建完毕后的Maven项目,双击pom.xml查看POM文件内容,可以自行添加Maven的依赖. ...
- Node.js-提供了四种形式的定时器
Node.js提供了四种形式的定时器 global.setTimeout(); //一次性定时器 global.setInterval(); //周期性定时器 global.nextTick(); / ...
- Mysql --分区表(7)Key分区
Key分区 按照Key进行分区非常类似于按照Hash进行分区,只不过Hash分区允许使用用户自定义的表达式,而Key分区不允许使用用户自定义的表达式,需要使用MySQL服务器提供的HASH函数;同时H ...
- tomee 第一个 远程调用 Session Bean
参考文档 http://tomee.apache.org/ http://download.oracle.com/otndocs/jcp/ejb-3.1-pfd-oth-JSpec/ http://d ...
- Setting SVN Repository Using TortoiseSVN + Dropbox in 5 Minutes
SVN is a very common version control system in software development. However configuring SVN server ...
- 注意在<s:if test="#session.user.power==0">中不能用 <s:if test=$sessionScope.user.power==0">
获取封装在session的对象 用#session.对象名,可以获取对象 用#session.对象名.属性,可以获取属性. 注意在<s:iftest="#session.user.po ...
- [转]moveTaskToback退后台
http://blog.csdn.net/dacainiao007/article/details/17352367 方法:public boolean moveTaskToBack(boolean ...
- js的变量使用<bean><list:write>赋值时需加' '
script的变量使用<bean><list:write>赋值时需加' ',如:var code ='<bean:write name="target" ...